如何在 ReactJS function 中获取最新的 state 值？

Question

function下面根据情况从2-3个地方调用。 我正在根据我的 state 中的值进行 api 调用，如下所示：

myFunction = () => {
    # do something
    const { myVariable } = this.state;
    if (!myVariable.item) {    // myVariable.item is not getting latest variable
        makeAPICall().then(data => {
            myVariable.item = data;
            this.setState({ myVariable });    // setting in state here
        });
    }
}

一次调用上述 function 后，state myVariable应该设置为 item，但是当它再次调用时， myVariable.item未定义。

我该怎么做才能从我的 state 中获取最新值，以防止另一个 api 调用？

Answer 1

问题：State 突变

您的变量myVariable是 object 对 this.state.myVariable 中的this.state.myVariable的引用。 您不能像myVariable.item = data那样分配给它，因为这是 state 的非法突变。

解决方案

您需要创建一个新的 object，您可以使用 object 扩展语法来完成。

myFunction = () => {
    const { myVariable } = this.state;
    if (!myVariable.item) {
        makeAPICall().then(data => {
            this.setState({ 
               myVariable: {
                  ...myVariable, // copy all properties
                  item: data, // override item property
               }
            });
        });
    }
}