1

我有两组数据要在表数据中显示，因此根据要求，尝试使用不同的数据设置表数据的状态。

表组件：

<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#never-mutate-reducer-arguments )

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

4

1 回答 1

3

materialTable 改变了您的数据，添加了包含行“Id”和“checked”元素的对象 TableData，因此如果您想避免突变，我建议在您的代码中使用它：

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

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

此致

于 2019-05-30T14:53:08.610 回答