替换对象数组的反应状态不起作用

Question

我有一个应用程序，在加载时它会向后端发出 HTTP 调用，它会使用响应数据设置状态并呈现它。但后来，在应用程序的其他部分，当我进行相同的 HTTP 调用并用来自后端的新数据替换状态时，状态不会改变至少它不会呈现。

要进行 HTTP 调用并更改状态，我使用以下方法进行操作：

getTradesFromApi(){
    backendService.getTrades().then(res => {
        let allTradesFromApi = this.state.trades;

        allTradesFromApi.splice(0, allTradesFromApi.length);

        res.data.trades.forEach(trade => {
            allTradesFromApi.push(trade);
        });

        this.setState({trades: allTradesFromApi});
    });
}

这是我设置状态的方式：

constructor(props) {
    this.state = {
         trades: [],
    };

    this.getTradesFromApi(); //This is the method above
}

如果您需要更多说明或代码的其他部分，请随时问我。

我看过其他类似的post，但我还没有真正找到实现它的方法。如果有人能帮助我，我将不胜感激！！

Answer 1

您的问题是您从未创建新数组来强制重新渲染，您使用的是相同的状态值。试试这个

getTradesFromApi(){
    backendService.getTrades().then(res => {
        let allTradesFromApi = this.state.trades.slice(); // slice creates a shallow copy

        // not sure the point of this
        // allTradesFromApi.splice(0, allTradesFromApi.length);

        res.data.trades.forEach(trade => {
            allTradesFromApi.push(trade);
        });

        this.setState({trades: allTradesFromApi});
    });
}

您还可以使用 concat 方法稍微清理此函数，returns 一个新数组。

getTradesFromApi(){
    backendService.getTrades().then(res => {
        this.setState({trades: this.state.trades.concat(res.data.trades) });
    });
}

替换对象数组的反应状态不起作用

Replacing react state of array of objects doesnt work

reactjs

react-state