反应 table：收到新数据后刷新 table

Question

我想在收到新数据后刷新我的反应 table。我原以为我会在更改状态时触发它，但是它不起作用。

下面是状态和更新函数：

this.state = {
    switchListSelected: [],
    switchListData: [],
    interfaceStatusData: [],
    interfaceErrorsData: []
}

updateParentState(data, element){       
    this.setState(prevState => {
        return prevState[element].push(data)
    }
}

Answer 1

这里有 2 个问题：

当使用setState时你需要return一个状态属性的对象来更新，这里你returnprevState[element].push(data)的结果（数组长度）。
您正在使用 Array.push() 改变数组，您需要使用不可变模式更新以使用更新后的状态正确触发渲染。

这应该适用于您的情况：

this.setState(prevState => ({
  [element]: [...prevState[element], data],
}));

Answer 2

您使用的 setState 有误。您应该使用新状态（或 returns 新状态的更新程序函数）调用 setState，并可选择在更新完成时调用回调。您可以在反应文档 here.

中检查 setState 的用法

在您的示例中，updateParentState 函数应如下所示：

updateParentState = (data, element) => {       
    this.setState({
        ...this.state,
        [element]: [...this.state[element], data]
    })
}

请注意，永远不要直接改变组件的状态。因此使用扩展运算符而不是 Array.push which mutates the array.

创建一个新数组

反应 table：收到新数据后刷新 table

react table: refresh table after new data received

reactjs

react-table