一个节点在状态树中不能存在两次（mobx-state-tree）

Question

我通过Error: [mobx-state-tree] A node cannot exists twice in the state tree. Failed to add SearchModel@/results/0 to path '/selectedItem'动作在以下模型中为selectedItem赋值时，收到setSelectedItem的错误。我检查了文档，我不确定是什么导致了这个问题。

感谢任何帮助。谢谢！

const SearchModel = types
  .model({
    results: types.array(ItemModel, []),
    selectedItem:types.maybeNull(ItemModel,{ id: 0 })
  })
  .actions(self => ({   
    setSelectedItem(selItem) {
      console.log( 'typeof(selItem)', typeof(selItem));
      self.selectedItem=selItem;
    }
  }));

export default SearchModel;

Answer 1

对于今后寻找这种类型错误的解决方案的人，我已经使用扩展运算符将selItem的浅层副本分配给self.selectedItem，问题就消失了。

代码必须如下所示：

const SearchModel = types
  .model({
    results: types.array(ItemModel, []),
    selectedItem:types.maybeNull(ItemModel,{ id: 0 })
  })
  .actions(self => ({   
    setSelectedItem(selItem) {
      self.selectedItem = { ...selItem };
    }
  }));

export default SearchModel;

Answer 2

另一种解决方案是使用Lodash库中的_.deepCopy。它比扩展运算符更通用，因为它将递归地沿着整个树而不是一个级别。这对较大的树有用，因此您不必将传播加倍或三倍或四倍，并且具有难以阅读的代码。

这就是你如何在一个简单的mobx-state-tree商店中使用它。它非常优雅，易于使用。

请注意：这是一个递归的复制复制函数，因此如果对象太大，性能可能会很差。

import _ from 'lodash';
import { types, getRoot, destroy, flow } from "mobx-state-tree";
            
const SearchModel = types
  .model({
    results: types.array(ItemModel, []),
    selectedItem:types.maybeNull(ItemModel,{ id: 0 })
  })
  .actions(self => ({   
    setSelectedItem(selItem) {
      self.selectedItem = _.deepCopy(selItem);
    }
  }));

export default SearchModel;