React 状态更改不会重新渲染

Question

我阅读了大量的帖子和文章，尝试了不同的方法，包括 useContext、useReducer 等，但我仍然不明白为什么状态没有改变以及为什么页面没有重新渲染？

const [access, setAccess] = useState(localStorage.getItem('access'));

    useEffect(() => {
        setAccess(localStorage.getItem('access'));
    }, []);

如果我将 [access] 传递给 useEffect，它就会变成无限循环。我已在父组件中添加了代码并将访问权限作为参数传递，但仍然不起作用。毫不奇怪，有 30 多个页面都有类似的帖子，而且大多数答案都不清楚、过时或不适合我。 AI也未能解决这个小问题。我正在使用功能组件，我找到的大部分信息都是关于基于类的组件。

Answer 1

因为你的状态没有改变。您已经设置了

localStorage.getItem('access')

并且您没有更新这些值，因此无需重新渲染。

您可以这样做：

const [access, setAccess] = useState(localStorage.getItem('access'));

const onClickValues=(values)=> (
setAccess(localStorage.setItem('access'), values)
)

当您在任何地方传递此函数时，它可以帮助您重新渲染。