时间戳

首页 > 解决方案 > Redux 状态和 useState 不同步

reactjs - Redux 状态和 useState 不同步

问题描述

我想将我的 reduxState 设置为 useState，但问题是 reduxState 在渲染之后出现，然后 useState 仍然有第一次渲染时得到的 null。期望：reduxState 将每次更改或更新传递给 useState。

    const Account: React.FC<Props> = ({ logInAction, userDataStore }) => {
        const [userValues, setUserValues] = useState<User>(userDataStore as User);
        return (
         <Text>
             {/*
              this data (userValues) still null 
              despite userDataStore 
              is changed and has Data
             */}
          Fullname: {userValues.fullName}  
         </Text>
        );
        .
        .
        .
        export default connector(Account);

我知道直接使用 redux state 对我有用：

userDataStore.fullName
     <Text>
                   {/* fullName: {userValues.fullName} */} ---> not work always null
                   fullName: {userDataStore.fullName} ---> this work good

              </Text>
    );

但我想使用useState。请问有什么帮助吗？

我将不胜感激。

标签： reactjsreact-nativereduxreact-reduxreact-hooks

解决方案

不确定您不想使用 reduxState 并使用useState钩子的原因是什么，但您可以通过添加钩子来实现 reduxState 和用户值之间的同步useEffect：

    const [userValues, setUserValues] = useState<User>(userDataStore as User);
    useEffect(() => {
      setUserValues(userDataStore as User)
    }, [userDataStore]);
    ...

这将设置userValues每当userDataStore更改。

推荐阅读