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

【问题标题】：react-bootstrap-table-next with mobx store doesn't render changes带有 mobx 存储的 react-bootstrap-table-next 不会呈现更改
【发布时间】：2020-03-23 00:36:00
【问题描述】：

如何使用 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);

【问题讨论】：

您使用的是什么版本的库？我在一个功能组件中使用带有 mobx 4 的 Bootstrap 表，它渲染得很好。只需确保您在 store.data 上的操作实际上由 Mobx 本身跟踪mobx.js.org/best/react.html 示例：如果您要添加到 store.data.myarray 中的数组，请确保在 store 操作中您这样做是这样 ` this.data.myarray = this.data.myarray.concat(newarray)` 这样 Mobx 将看到该变量现在指向其他地方，纯值更改将无法解决问题

标签： javascript reactjs mobx

【解决方案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，但是你使用的库有这个限制，你应该解决这个问题

【讨论】：