观察者不适用于递归项目

问题描述

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

提前致谢

解决方法

问题在于，当您使用递归 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