Question

问题是，我使用setState更新state.n和state.data。我想使用处理程序调用setState onClick。调用setState之后，我执行一个回调console.log来监视更改后的状态属性，但仅更改state.data，而不更改state.n。

handler(e) {
    this.setState((state) => {
        let arr = state.data;
        arr.push(fakeTableData[state.n+1]);
        this.setState({n: state.n+1, data: arr});
    }, console.log.bind(null, this.state.n));
}

使用一个处理程序后，我希望看到state.n增加，但是我只更改了state.data，而没有更改state.n。而且我收到这样的警告：“警告：已从更新函数内部安排了更新（setState，replaceState或forceUpdate）。更新函数应该是纯函数，副作用为零。请考虑使用componentDidUpdate或回调。”我已经在主要的React网站上阅读了一个教程，但是没有足够的信息。

Answer 1

您不应在设置状态的函数内部使用setState。这就是为什么您会出错。相反，您应该返回状态。试试这个：

handler = (e) => {
    this.setState((state) => {
        let arr = state.data;
        arr.push(fakeTableData[state.n+1]);
        return {n: state.n+1, data: arr};
    }, () => { console.log(this.state.n) });
}

Answer 2

让我们尝试let arr = [...state.data]

调用

2 个答案: