Question

我用可观察的数组存储：

@observable list = [];

我已经使用方法删除了我的数组中的项目：

@

@action remove(_id) {
  const presentation = this.list.find(item => _id === item._id);
  this.list.remove(presentation);
  console.log(this.list.slice()); // Don't update, @action log : spliced 'PresentationsStore@2.list': index 2, added 0, removed 1
}

@action findUserPresentations(userId) {
  return this.list.filter(item => userId === item.userId);
}

我的console.log（）运行良好（返回没有项目的新数组），但我的@observable容器没有更新：

@observer
@inject('user', 'presentations')
class MyPresentationsContainer extends React.Component {

  get presentations() {
    return this.props.presentations.findUserPresentations(this.props.user.id);
  }

  render() {
    return (
      <MyPresentations
        presentations={this.presentations}
      />
    );
  }
}

任何人都知道我是否需要在remove(_id)添加其他方法？

谢谢！

Answer 1

您只需将remove方法定义为：

action remove(_id) { const item = this.list.find(item => _id !== item._id) this.list.remove(item) }

您的更新无效的原因是您要将新数组分配给this.list。这是不必要的，但本身并不是问题。

但是，在组件中，您将对列表的引用存储在创建时的状态。现在，在重新分配this.list后，列表会更新，但您的州仍然指向旧列表。在本地存储引用是一种反模式，因为您基本上创建了还原信息，这会导致您的错误。

相反，你可以更好地写

@observer
@inject('user', 'presentations')
class MyPresentationsContainer extends React.Component {

  get presentations() { 
     return this.props.presentations.findUserPresentations(this.props.user.id)
  }

  render() {
    console.log(this.presentations);
    return (
      <MyPresentations
        presentations={this.presentations}
      />
    );
  }
}

这可以防止将旧引用的副本存储到列表中。

Answer 2

filter方法基本上返回一个新数组。

您可以这样做：

this.list = this.list.filter(item => userId === item.userId);

Mobx不更新可观察数组

2 个答案: