React-bootstrap-table-next with Mobx Store 不会呈现更改

Question

接下来如何使用mobx存储设置react引导表
我的问题是引导表不呈现"存储"更改。是否有任何特定的方法/属性会触发数据刷新？相同的代码示例适用于本地状态：

完整的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

原因很简单——BootstrapTablereact组件不是为了观察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的变化

我知道这有点麻烦，但你使用的库有这个限制，你应该围绕工作