时间戳

首页 > 解决方案 > 为什么我的 setState 不能使用带有 react-native 的 useEffect 在 setInterval 中更新？

javascript - 为什么我的 setState 不能使用带有 react-native 的 useEffect 在 setInterval 中更新？

问题描述

我的组件是：

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当我注销它时它会停留在。

标签： javascriptreactjsreact-nativereact-hooksuse-effect

解决方案

从反应文档：

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

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

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

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

推荐阅读