无法使用 localStorage 更新状态答案

【问题标题】：Not able to update state using localStorage无法使用 localStorage 更新状态
【发布时间】：2021-12-05 15:49:50
【问题描述】：

我正在尝试使用存储的凭据重新登录，但它不起作用，我已经尝试了所有方法。 dispatch 函数适用于表单，但不适用于 localStorage。

App.tsx：

useEffect(() => {
    const userDetails=localStorage.getItem('user')
    if (userDetails) { 
      const user= JSON.parse(userDetails);
      login(user); // dispatch function
    }
  });

【问题讨论】：

不太清楚是什么问题。预期的结果是什么？正在发生什么？
你在设置存储吗？ useEffect 执行是否延迟（异步）？而且...只是不要使用 localStorage 来存储密码/敏感内容，这是一个巨大的安全风险！更喜欢令牌或任何其他 oauth 方法，但不喜欢纯文本密码/详细信息！
我已经尝试了一切，甚至安慰了值并显示了实际对象，也使用了异步等待，但它不起作用

标签： reactjs typescript local-storage use-effect

【解决方案1】：

如果您确定，localStorage 和 useEffect 中的值应该只调用一次——在组件挂载阶段；我建议通过道具发送价值。使用这种方法，猜测发生了什么会容易得多。

const ParentComponent = () => (
    <Component
        user={
            JSON.parse(localStorage.getItem('user'))
        }
    />
)

const Component = ({
    user
}) => {
    useEffect(() => {
        login(user); // dispatch function
    }, [user]);

    return <></>
};

【讨论】：