将本机 setState 与对象反应

Question

假设我有一个名为 Profile Screen 的功能组件，如下所示：

const ProfileScreen = props => {
    const { token, user } = useSelector(state => state.auth);
    const [userData, setUserData] = useState({});

    let userValidatedInfo = validatedUserInfo(user);
    setUserData({...userValidatedInfo});

    return <Text>{userData.fullName}</Text>
}

当我访问 <Text>{userData.fullName}</Text> 中对象 userData 的属性之一时，即userData.fullName 它说它是未定义的。我的 setState 调用 (setUserData) 没有更新当前的 userData 状态

我做错了什么

如果我在调用 setUserData 之前 console.log userValidatedInfo，我会得到以下信息：

Object {
    "fullName": "Person's name",
    //... more properties
}

Answer 1

我假设 validatedUserInfo 是一个普通的 -sync- 函数，它必须是异步的。除了 validatedUserInfo.

，您的代码看起来还不错

在 javascript here 中查看有关异步的更多信息。

Answer 2

我认为您在文本组件中直接使用了 userData.fullName。当组件在 setUserData 之前第一次呈现时，userData 为空。

所以，你可以这样试试，

{userData.fullName && <Text>{userData.fullName}</Text>}

将本机 setState 与对象反应

React Native setState with objects

setstate

react-native