Reactjs Mobx状态树、Mobx react和RenderOps的组合不更新react组件

这是一个复杂的问题。希望我能解释一下，这样每个人都能理解这个bug

1）父组件。

@observer
export class Edit extends React.Component<IProps> {
  article: any

  componentWillMount() {
    const articleId = this.props.routerStore!.routerState.params.id!

    this.article = ArticleModel.create({ id: articleId || null })
    this.article.init()
  }

  render() {
    if (!this.article) {
      return <div>loading...</div>
    }

    return <div className='main-wrapper'>
      <EditArticle article={this.article} />
    </div>
  }
}

本文是一个mobx状态树模型。 这是模型的actions属性的init方法：

init() {
  const run = flow(function*() {
    const res = yield getArticle(self.id)
    applySnapshot(self, res)
  })

  run()
},

流程如下所示： 1） 创建文章 2） 在这篇文章里 3） 我希望在收到回复和applySnapshot后看到文章更新

但是，在运行applySnapshot之后，子组件不会重新加载。我检查并运行applySnapshot，文章中有从后端接收到的更新值

我假设问题是因为我在我的子组件中使用了RenderProps，这会以某种方式干扰并限制组件重新渲染

棘手的是如果我加上

{this.props.article.layout.map((el: any, index: number) =>
  <Layout key={getPath(el)} item={el} />
)}

{this.props.article.layout.map（（el:any，index:number）=>
)}

在

render

函数的任意位置的子组件中，这将修复问题，并更新初始组件。因此，只需重新命名道具，子组件就会重新命名自身，并通过重新命名Drappable和RenderOps隐式修复我最初的bug

可能的解决方案1:如果我使用的是不同的react DND库，而不是使用RenderOps，则所有内容都会按应有的方式更新。但我不想这样做，因为

resact beautifuly dnd

有很好的动画，我需要重构一些代码

我无法理解为什么子组件没有重新招标

子组件是否不知道它依赖于文章，因为我只在RenderOps中使用

this.props.article

---

我可以避免使用renderProps吗？

我不确定，但也许您应该使用mobx react库中的@observer。类似这样的东西-{{this.props.article.layout.map..}>这很有效。将地图包装在观察者中可以工作。但是为什么呢？子类被包装在@observer中。区别是什么？你用的是什么Mobx版本？4和更早版本不响应嵌套的更改版本“5.9.4”。但是@anton62k-answer解决了这个问题。

{this.props.article.layout.map((el: any, index: number) =>
  <Layout key={getPath(el)} item={el} />
)}