带有 mobx 存储的 react-bootstrap-table-next 不会呈现更改

Question

如何使用 mobx 商店设置 react-bootstrap-table-next？我的问题是引导表不呈现“存储”更改。是否有任何特定的方法/属性会触发数据刷新？相同的代码示例适用于本地状态：完整的 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// storeclass Store {  @observable data = [];  @action setData(list) {    this.data.push(...list);  }  ...}// component@observerclass ProductList extends React.Component {  render() {    return       <BootstrapTable        keyField="id"        data={this.props.store.data}        ...      />  }}// App.jsReactDOM.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}

           ...

          />

      </>

  }

}

在上面的示例中，表格的渲染将在以下位置完成：

更改存储数据元素计数

更改someProp1, someprop2, someProp3存储数据的任何元素

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