处理状态变量初始化

Question

我正在尝试使用状态变量填充表单数据。状态变量的数据正在从redux存储中获取，如下所示：

const [location, setLocation] = useState(post && post.location);
const [hastage, setHastage] = useState(post && post.hastage);
const [caption, setCaption] = useState(post && post.caption);
const [postImg, setPostImg] = useState(post && post.postImg);

在上面的代码"post"是redux存储实例。

一切都很好。然而，问题是：

当我刷新页面"post"数据时，数据是异步调用，因此在获取post数据之前，所有变量都用"初始化"(空白(。形式越来越空。

在"post"数据准备好后，如何初始化所有状态变量？

Answer 1

您应该初始化useEffect钩子内的所有状态值，这可以允许您在DOM渲染后执行一些操作。

首先，您将所有状态初始化为一个空字符串，如

const [location, setLocation] = useState('');
const [hastage, setHastage] = useState('');
const [caption, setCaption] = useState('');
const [postImg, setPostImg] = useState('');

在第二个地方，你将添加useEffect，这将允许你执行副作用

useEffect(() => {
// here you can check for existence of any attribute on the `post` object
if(post && post.location) {
setLocation(post.location);
}
// etc.
}, [post]);

您还可以将post对象传递给useEffect钩子的第二个参数，这将在每次post的值更改时触发组件的重新发布。

Answer 2

您可以使用带有post的useEffect作为依赖项，如果存在post，它将更新所有状态值。

useEffect(() => {
if (post) {
setLocation(post.location)
setHastage(post.hastage)
setCaption(post.caption)
setPostImg(post.postImg)
}
}, [post])

Answer 3

您可以使用条件表达式，该表达式只有在数据中有值时才返回表单，当它获取某些值时，您可以执行加载屏幕或隐藏表单的微调器等操作。从技术上讲，你可以在redux中添加一个额外的值来跟踪这个值，当这个值改变时，你会显示表单。你也可以尝试禁用表单字段作为额外的建议。

return (<div>{post.hasLoaded ? <MyForm /> : 'Loading...'}</div>);

或

return (<div>{post && post.location ? <MyForm />:'Loading..'}</div>);