为什么这个React / Mobx观察者组件在其可观察道具发生变化时不会重新渲染？

Question

我有一个React组件，它从其props中呈现数据表。 数据包含在MobX的observable() 。 有时，异步操作（AJAX调用）会向数据源添加一个新行，这会导致新的表行呈现。 不是这种情况。

有关组件的最小示例如下：

@observer
class MyDashboard extends React.Component {
    render() {
        return (
            <Table
                columns={this.props.columns}
                dataSource={this.props.model.contentTypes}
            />
        );
    }

    @action.bound
    private onThingHappened = async () => {
        const thing = await asyncThing();
        runInAction('onThingHappened', () => {
            this.props.model.contentTypes.push(thing);
        });
    }
}

道具model是一个可观察的对象。 model.contentTypes是一个对象数组。 该表在第一次抽奖时正确呈现; 它是随后的重新渲染，这是有问题的。

如果删除await则onThingHappened的绑定操作onThingHappened预期工作。 换句话说 - 在第一次await触发之前发生的模型更改按预期重新呈现。

runInAction似乎没有显着改变任何东西。

但是，如果我在组件本身中绘制model.contentTypes - 而不是简单地将其传递给子组件（在本例中为<Table> ），整个过程按预期工作。 例如：

    return (
        <React.Fragment>
            <div style={{display: 'none'}}>{this.props.model.contentTypes.length}</div>
            <Table
                columns={this.props.columns}
                dataSource={this.props.model.contentTypes}
            />
        </React.Fragment>
    )

在这个渲染函数中，取消引用model.contentTypes数组似乎足以触发onThingHappened的重新渲染，即使在await之后也是如此。

Answer 1

我不使用mobx但经过一些研究后：

• 在observer()包装<Table/>应该有效...如果<Table/> render直接使用该值，如果传递给（unwrapped）子组件，它可能会失败;

“Mobx跟踪访问”可能足以迫使mobx通过“不必要的”访问来做出反应。

试试吧：

render() {
  const amount = this.props.model.contentTypes.length;
  if( !amount ) return null; // to avoid 'amount unused, no unused ...'

  return (
    <Table
      columns={this.props.columns}
      dataSource={this.props.model.contentTypes}
    />
  );
}