Redux-如何等待从useSelector获取状态

Question

等待来自useSelector的数据的最佳方式是什么。我的意思是，我有一个async action，它正在使用redux-thunk或确切地说是createAsyncThunk进行调度。调度的一切都很好，但我遇到的问题是，我想显示某个组件，并将useSelector中的state作为道具传递。

由于是async action，所以需要等待一段时间才能获得数据，但我需要这些数据来向用户显示某个组件，就像我所说的那样，所以我将state作为道具传递，但我最终得到了null值，因为我在取回数据之前传递了道具。我也在使用Firebase作为，比方说API。

这是我的代码：

const ProfileSection = () => {
const [account, setAccount] = useState([]);
const user = useSelector((state) => state.user.user);
useEffect(() => {
onAuthStateChanged(authFirebase, (user) => {
if (user) {
dispatch(getUser(user.email));
setAccount(user);
}
});
}, [user]);
console.log(account);
return (
<>
{account && (
<Container className="py-5">
<div className="profile-section">
<Row>
<ProfileData user={account[0]} />
<ProfileForm user={account[0]} />
</Row>
</div>
</Container>
)}
</>
);
};

如您所见，组件ProfileData和ProfileForm正在使用此状态作为道具。

我有一个的想法，我只需要在两个组件上使用useEffects。

此外，我需要这个state来获得useState状态的默认值。

这就是我的意思：

const initialState = {};
if (user) {
initialState.firstName = user.firstName;
initialState.email = user.email;
initialState.lastName = user.lastName;
}
const [formData, setFormData] = useState(initialState);

Answer 1

React中没有等待。您的组件必须在父组件渲染<ChildComponent>的瞬间进行渲染。React Suspense将在未来改变这种情况，但目前这就是React的工作方式。

您的组件必须考虑到它将在数据准备好之前进行渲染，请检查这一点，在这种情况下，请执行类似return <div>loading...</div>的操作，而不是尝试访问数据。