为什么我的 setState 不会在使用带有 react-native 的 useEffect 的 setInterval 中更新？ [复制]答案

【问题标题】：Why won't my setState update in a setInterval using a useEffect with react-native? [duplicate]为什么我的 setState 不会在使用带有 react-native 的 useEffect 的 setInterval 中更新？ [复制]
【发布时间】：2020-08-22 00:40:40
【问题描述】：

我的组件是：

export default function TopHalf(props) {
    const [startDegrees, setStartDegrees] = useState(0)

    useEffect(() => {
        const centerPoint = { x: dim.width / 2, y: dim.height / 4 }
        setCenter(centerPoint)

        setInterval(() => {
            console.log('startDegrees', startDegrees)
            setStartDegrees(startDegrees + 5)
        }, 500)
    }, [])
...
    return (
        <HalfView style={{ top: 0, position: 'absolute', width: '100%' }} >
            {props.participants?.map(circularParticipants)}
        </HalfView>
    )
}

所以你可以看到startDegrees 应该每半秒增加一次5。但是当我注销它时，它会停留在0。

【问题讨论】：

只是让你知道，我没有对你投反对票。
this article 很好地解释了发生的事情。基本上 startDegrees 是一个陈旧的闭包，如果您仔细检查 startDegrees 如何通过闭包可用以及闭包如何工作，那么您可以理解为什么您创建的内容不起作用。您可以通过将回调传递给 setStartDegrees 并执行 setStartDegrees(current=>current + 5) 或更好的方法来修复它；将 setStartDegrees 设置为效果的依赖项，并设置一个可以在效果清理函数中清除的 setTimeout。

标签： javascript reactjs react-native react-hooks use-effect

【解决方案1】：

来自反应文档：

将 setState() 视为请求而不是立即命令更新组件。为了获得更好的感知性能，React 可能延迟它，然后一次更新几个组件。反应不保证立即应用状态更改。

https://reactjs.org/docs/react-component.html#setstate

在这种情况下，react 可能没有更新状态，因此日志正在读取原始值。为避免 setState 的并发问题，您可以将回调作为第二个参数传递，该参数在 setState 执行时调用。这样，它总是会在更新之前直接获取值。

上面的链接中有更多信息。希望这会有所帮助！

【讨论】：

您建议的解决方案是正确的，但解释和链接已关闭。 OP 使用的是钩子，而不是类组件，问题不在于设置状态的延迟，而在于闭包被定义一次，并且仅在挂载时以初始值捕获一次 startDegrees。
useState documentation 在这里更适合参考。