为什么我在对三个有效数字执行操作时得到 NaN？

Question

下面的代码 returns NaN 尽管构成表达式的值都是有效数字。我很困惑和沮丧 xD。我这里的错误是什么？

private getAllData = (res: any) => {
    this.setState({ priceBinance: res["binance"]["price"] })
    this.setState({ volumeBinance: res["binance"]["volume"] })
    this.setState({ highBinance: res["binance"]["high"] })
    this.setState({ lowBinance: res["binance"]["low"] })

    this.setState({ priceCrypto: res["crypto"]["price"] })
    this.setState({ volumeCrypto: res["crypto"]["volume"] })
    this.setState({ highCrypto: res["crypto"]["high"] })
    this.setState({ lowCrypto: res["crypto"]["low"] })

    this.setState({ priceKraken: res["kraken"]["price"] })
    this.setState({ volumeKraken: res["kraken"]["volume"] })
    this.setState({ highKraken: res["kraken"]["high"] })
    this.setState({ lowKraken: res["kraken"]["low"] })

    // THIS IS WHERE IT FAILS
    this.setState({ priceAverage: (this.state.priceBinance! + this.state.priceCrypto! + this.state.priceKraken!) / 3.0 })
    this.setState({ voulumeAverage: (this.state.volumeBinance! + this.state.volumeCrypto! + this.state.volumeKraken!) / 3.0 })
    this.setState({ highAverage: (this.state.highBinance! + this.state.highCrypto! + this.state.highKraken!) / 3.0 })
    this.setState({ lowAverage: (this.state.lowBinance! + this.state.lowCrypto! + this.state.lowKraken!) / 3.0 })
  }

Answer 1

setState 是一个异步函数，因此您会得到 NaN。尝试使用 res 变量设置每个状态，而不是使用 this.state .

Answer 2

setState 是一个异步操作，这意味着一旦你为状态设置了一个值，它就不需要立即更新状态，而且你还使用 ! 强制展开状态值，因为你得到的 NaN 意味着当你试图访问状态值时状态值尚未更新，有两种方法可以解决这个问题：

状态更新后调用回调（不推荐，因为您必须为每个状态值执行此操作）。
使用res 属性直接获取值并执行所需的操作。

this.setState({ priceAverage: (res["binance"]["price"] + res["crypto"]["price"] +res["kraken"]["price"]) / 3.0 })

为什么我在对三个有效数字执行操作时得到 NaN？

Why do I get NaN as result of operation perfomed on three valid numbers?

javascript

reactjs

state

nan