Блог

Я сохраняю объект узла в состоянии. Когда я нажимаю кнопку, я хочу изменить свойство ‘title’ и запустить обновление компонента для отображения нового значения заголовка. В функциональном компоненте ничего не происходит, он обновляется только в компоненте класса.

компонент класса:

 class ClassTest extends Component {
  state = {
    root: new Node()
  };

  render() {
    const { root } = this.state;

    return (
      <div>
        <div>class component: {root.title}</div>
        <button
          onClick={() =>
            this.setState(
              produce((draft) => {
                draft.root.title = "title changed";
              })
            )
          }
        >
          change
        </button>
      </div>
    );
  }
}
 

функциональный компонент:

 const FunctionTest = () => {
  const [state, setState] = useState({ root: new Node() });

  const { root } = state;

  return (
    <div>
      <div>function component: {root.title}</div>
      <button
        onClick={() =>
          setState(
            produce((draft) => {
              draft.root.title = "title changed";
            })
          )
        }
      >
        change
      </button>
    </div>
  );
};
 

демонстрация code sandbox

Как я могу перенести состояние immer в хуки?