带有 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

// 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 属性放在上面）。因此，作为一种解决方法，您可以在组件中添加隐藏字段以及您想要观察的所有数据：@observerclass ProductList extends React.Component {&nbsp; render() {&nbsp; &nbsp; return&nbsp;&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className="hidden">{this.props.store.data.length}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className="hidden">{this.props.store.data.map(x=>{{x.someProp1, x.someProp2, x.someProp3}})}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BootstrapTable&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;keyField="id"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data={this.props.store.data}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </>&nbsp; }}在上面的示例中，表格的渲染将在以下位置完成：更改存储数据元素计数更改someProp1, someprop2, someProp3存储数据的任何元素我知道这有点 hacky，但是你使用的库有这个限制，你应该解决这个问题