react-bootstrap-table-next with mobx store 不渲染变化

Question

如何使用 mobx 存储设置 react-bootstrap-table-next？
bootstrap table 不呈现 "store" 更改的问题。是否有任何特定的 method/property 会触发数据刷新？相同的代码示例适用于本地状态：

完整的 mobx 示例： https://codesandbox.io/s/react-bootstrap-table-next-with-mox-store-basic-example-not-rendering-changes-o5v6g

本地状态示例： https://codesandbox.io/s/react-bootstrap-table-next-with-local-state-basic-example-rendering-changes-1o9b9

// store

class Store {
  @observable data = [];
  @action setData(list) {
    this.data.push(...list);
  }
  ...
}

// component

@observer
class ProductList extends React.Component {

  render() {

    return 
      <BootstrapTable
        keyField="id"
        data={this.props.store.data}
        ...
      />
  }

}

// App.js

ReactDOM.render(<ProductList store={store} />, rootElement);

Answer 1

原因很简单 - BootstrapTable react 组件不是为了观察 mobx 变化而设计的（没有在其上放置 @observer 属性）。

因此，作为一种解决方法，您可以在组件中添加隐藏字段，其中包含您想要观察的所有数据：

@observer
class ProductList extends React.Component {

  render() {

    return 
      <>
          <span className="hidden">{this.props.store.data.length}</span>
          <span className="hidden">{this.props.store.data.map(x=>{{x.someProp1, x.someProp2, x.someProp3}})}</span>
          <BootstrapTable
           keyField="id"
           data={this.props.store.data}
           ...
          />
      </>
  }

}

在上面的示例中，table 的渲染将在以下时间完成：

商店数据元素计数的变化
商店数据的任何元素someProp1, someprop2, someProp3发生变化

我知道这有点老套，但是您使用的库有这个限制，您应该解决这个问题

react-bootstrap-table-next with mobx store 不渲染变化

react-bootstrap-table-next with mobx store doesn't render changes

javascript

reactjs

mobx