0

Всем привет, есть простой React App, что был создан при помощи npx create-react-app my-app

я изменил код в файле файл App.js вот таким образом

import './App.css';

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        вариант 1
        <p>name : {props.name}</p>
        <p>status : {props.status}</p>
        вариант 2
        <p>name: {props.system.storage.name}</p>
        <p>name: {props.system.storage.status}</p>
        <button onClick={props.system.change}>change</button>
      </header>
    </div>
  );
}

export default App;

в папке src я добавил новую папку, что называется system в ней я создал файл с названием state.js что содержит данный код а именно пропсы что идут с файла /system/state.js

class State {

    storage = {
        name:null,
        status:null
    }

    change = () => {
        
        this.storage = {name:'1',status:'2'}
        console.log(this.storage)

    }

}

export var state = new State()

в index.js React приложения я добавил такой код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import {state} from './system/state'

ReactDOM.render(
  <React.StrictMode>
    <App 
        system={state} 
        name={state.storage.name} 
        status={state.storage.status} />
  </React.StrictMode>,
  document.getElementById('root')
);

проблема в том что при нажатии на кнопку новое состояние выводится в консоль но не изменяется значение пропсов компонента App и не происходит перерисовка. Моя цель найти решение как заставить App.js компонент App вывести обновленное имя и статус при нажатии на кнопку. Задача найти решение без использования redux или mobx или других сторонних библиотек

4
  • Почему бы не использовать Redux? Или Context? 13 авг 2021 в 10:03
  • Спасибо за ответ Nikita, суть в том что я хочу понять как сделать свою систему управления общим состоянием приложения что б вызывать просто функции что меняют значения, на счет контекста идея не плохая, сейчас буду пробовать, если получится что-то отпишу 13 авг 2021 в 17:59
  • Не думаю что помог именно контекст но получилось отобразить изменившиеся значения после того как я внутри компонента App использовал хук useState, а именно const [a,render] = useState(false), кнопка теперь выглядит так <button onClick={ ()=>{contextValue.change(); render(!a) } }>change</button> хотелось бы найти решение без использования useState 13 авг 2021 в 18:48
  • почему я не хочу использовать useState, change = () => { setTimeout( ()=>{ this.storage = {name:'1',status:'2'}; console.log(this.storage) }, 100 ) } потому что асинхронные данные не будут отображаться 13 авг 2021 в 19:11

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.