观察者不适用于递归项

Question

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

提前致谢

Answer 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

观察者不适用于递归项

Observer does not work for recursive items

javascript

reactjs

mobx

mobx-state-tree

mobx-react-lite