为什么不能在函数中访问更新的prop值？

Question

所以我有一个功能组件，可以从redux获取数据。 我的问题是，尽管数据在Redux存储中正确更改，但我无法访问某个道具的当前值，所以我认为Redux并不是问题。

我在下面重写了我组件的一个简单版本。 奇怪的是，即使在我的组件jsx中返回值.toString（）也会返回正确的值，所以我希望这只是一个范围问题，或者是我没有得到我的代码而没有得到正确的值。

const Player = ({ isPlaying }) => {

  function setProgress() {
    console.log(isPlaying) // returns false here continuously!
  }

  function playSong() {
    setInterval(() => {
      setProgress();
    }, 500);
  }

  useEffect(() => {
    console.log(isPlaying) // returns true here!
  }, [isPlaying])
}


const mapStateToProps = ({ isPlaying }) => {
  console.log(isPlaying); // also returns true here!
  return { isPlaying };
};

export default connect(mapStateToProps, null)(Player);

这是我遇到的问题的CodeSandbox重新创建的链接。

https://codesandbox.io/s/playererrordemo-r6bt2

Answer 1

setInterval在isPlaying之上创建一个闭包，这就是为什么它总是相同的值。

时间间隔保留对isPlaying的值的引用，它是通过with调用的。 要进行更改，您可能需要clearInterval并在isPlaying更改时开始一个新的isPlaying 。