观察者不适用于递归项目答案

【问题标题】：Observer does not work for recursive items观察者不适用于递归项目
【发布时间】：2021-08-02 16:46:27
【问题描述】：

我真的被这个问题困住了。我有一个嵌套菜单。单击第一级菜单后，会出现第二级项目。单击其中一个孩子后，没有任何反应。看起来观察者不适用于深层项目。我不知道“迟到”类型是否有问题。代码中描述了一切： https://codesandbox.io/s/mobx-state-tree-recursive-deep-menu-p7eqj

提前致谢

【问题讨论】：

标签： javascript reactjs mobx mobx-state-tree mobx-react-lite

【解决方案1】：

问题在于，当您使用递归TreeItem 组件时，它实际上并不是observer。您仅在导出时将其包装在 observer 中，但 TreeItem 中的 TreeItem 是常规组件，而不是 observer，因此它不会对任何内容做出反应。

基本上你只需要移动observer装饰器：

// Use `observer` right here straight away
const TreeItem = observer((props) => {
  const handleClick = () => {
    props.item.active ? props.item.deactivate() : props.item.activate();
  };

  const ItemChildren = ({ children }) => {
    return (
      <ul>
        {children.map((child) => (
          <TreeItem key={child.id} item={child} />
        ))}
      </ul>
    );
  };

  return (
    <React.Fragment>
      <li onClick={handleClick}>{props.item.id}</li>
      {props.item.active && (
        <ItemChildren children={values(props.item.children)} />
      )}
    </React.Fragment>
  );
});

// Remove it from here
export default TreeItem;

Codesandbox

【讨论】：