用对象反应 Native setState答案

【问题标题】：React Native setState with objects用对象反应 Native setState
【发布时间】：2020-03-14 17:39:28
【问题描述】：

假设我有一个名为 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>i.e 中的对象 userData 的属性之一时userData.fullName 它说它是未定义的。我的setState 调用 (setUserData) 做错了什么，它没有更新当前的userData 状态

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

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

【问题讨论】：

标签： react-native setstate

【解决方案1】：

我假设validatedUserInfo 是一个普通的 -sync- 函数，它必须是异步的。除了validatedUserInfo，您的代码看起来还不错。

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

【讨论】：

【解决方案2】：

我认为您在 Text 组件中直接使用 userData.fullName。当组件在setUserData 之前第一次渲染时，userData 为空。

所以，你可以这样试试，

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

【讨论】：

试图了解功能组件呈现其内容的顺序。所以它会在调用我的 validateUserInfo 之前渲染返回中的内容，即使它在返回 JSX 之前调用？
首先，让我知道你在哪里调用方法setUserData({...userValidatedInfo});
我在 return <Text>{userData.fullName}</Text> 之前调用了 setUserData 函数...在上面添加了编辑以查看确切顺序
你不应该直接调用 setUserData。在 useEffect() 中调用它。