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的初始状态为null。我第一次设置状态没有问题，但是在更改状态时出现以下错误

在路径之间的调度之间检测到状态突变 partnerEvents.0.tableData。这可能会导致错误的行为。（http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments）

不知道我的代码出了什么问题，谢谢您的帮助

Answer 1

materialTable对数据进行了变异，添加了包含行'Id'和'checked'元素的对象TableData，因此，如果您想避免这种变异，建议在代码中使用它：

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

请让我知道是否可以避免您遇到的突变问题。

最好的问候

MaterialTable-在调度之间检测到状态突变

1 个答案: