response- bootstrap -table-next с магазином mobx не отображает изменений

Question

Как настроить response- bootstrap -table-next с магазином mobx? Моя проблема в том, что таблица bootstrap не отображает изменения "store". Существует ли какой-либо конкретный c метод / свойство, которое будет инициировать обновление данных sh? Тот же пример кода работает с локальным состоянием:

Полный пример 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 компонент реагирования не предназначен для наблюдения за изменениями 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 в любом элементе хранилища данных

Я знаю, что это немного странно, но библиотека, которую вы используете, имеет это ограничение, которое вы должны обойти