MaterialTable - Обнаружена мутация состояния между отправками

Question

У меня есть два набора данных, которые я хочу отобразить в табличных данных, поэтому, в зависимости от требований, пытаюсь установить состояние табличных данных с различными данными.

Компонент таблицы:

<Grid item xs={12} md={8}>
  {this.state.showTable && this.state.tableData !== null && (
       <MaterialTable
         title="Manage Blogs"
         columns={this.state.columns}
         data={this.state.tableData}
         actions={[
         {
           icon: "open_in_new",
           tooltip: "Open Blog",
           onClick: (blog, rowData) => {
            // Do save operation
            this.props.history.push("partner/blog/" + rowData._id);
             }
            }
          ]}
        />
  )}
</Grid>

Ниже приведены два места, где я меняю состояние tableData:

  changeSelectedComponent = label => {
    debugger;
    if (this.state.selectedComponent.toString() !== label)
      this.setState(state => ({ selectedComponent: label }));
    if (label === "Blogs") {
      if (
        this.props.partnerBlogs === null &&
        this.props.apiCallsInProgress === 0
      ) {
        this.props.actions
          .loadPartnerBlogs(this.props.auth0UserProfile.sub)
          .catch(error => {
            alert("Loading events failed" + error);
          });
      } else if (this.props.apiCallsInProgress === 0) {
        this.setState({ tableData: this.props.partnerBlogs, showTable: true });
      }
    } else if (label === "Your Events") {
      if (
        this.props.partnerEvents === null &&
        this.props.apiCallsInProgress === 0
      ) {
        this.props.actions
          .loadPartnerEvents(this.props.auth0UserProfile.sub)
          .catch(error => {
            alert("Loading events failed" + error);
          });
      } else if (this.props.apiCallsInProgress === 0) {
        this.setState({ tableData: this.props.partnerEvents, showTable: true });
      }
    }
  };

Еще одно место после получения новых реквизитов:

  componentWillReceiveProps(nextProps) {
    debugger;
    if (
      this.props.partnerBlogs !== nextProps.partnerBlogs &&
      nextProps.apiCallsInProgress === 0
    ) {
      this.setState({
        tableData: nextProps.partnerBlogs,
        showTable: true
      });
    }
    if (
      this.props.partnerEvents !== nextProps.partnerEvents &&
      nextProps.apiCallsInProgress === 0
    ) {
      this.setState({
        tableData: nextProps.partnerEvents,
        showTable: true
      });
    }
  }

Начальное состояние tableData является нулевым. Нет проблем, когда я устанавливаю состояние в первый раз, но при изменении состояния появляется следующая ошибка

Мутация состояния была обнаружена между отправками в пути partnerEvents.0.tableData, Это может вызвать неправильное поведение. ( http://redux.js.org/docs/Troubleshooting.html)

Не знаю, что не так в моем коде, спасибо за помощь

Answer 1

MaterialTable мутировал ваши данные, добавляя объект TableData, который содержит элементы строки "Id" и "флажок", поэтому я рекомендую использовать это в своем коде, если вы хотите избежать мутации:

data={this.state.yourData.map(x =>Object.assign({}, x))}

Пожалуйста, дайте мне знать, если это позволит избежать проблем с мутациями, которые у вас возникают.

С уважением