Question

假设我有一个称为“个人资料屏幕”的功能组件，即以下内容：

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

我认为您直接在Text组件中使用userData.fullName。当组件在setUserData之前首次呈现时，userData为空。

所以，您可以这样尝试

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

与对象反应本机setState

2 个答案: