处理状态变量初始化

Question

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

  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 store 实例。

一切正常。然而，问题是：

当我刷新页面时 'post' 数据是异步调用，因此在获取 post 数据之前所有变量都用“”（空白）初始化。表格变空了。

要在 'post' 数据准备好后初始化所有状态变量吗？

Answer 1

你可以使用条件表达式，如果数据中有一些值，它只 returns 表单，当它获取一些值时，你可以做一些事情，比如加载屏幕或隐藏表单的微调器，ETC。从技术上讲，您可以在 redux 中添加一个额外的值，仅用于跟踪此值，并在该值更改时显示表单。您也可以尝试禁用表单字段作为额外建议。

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

或

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

Answer 2

您应该在 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 3

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

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

处理状态变量初始化

Handle state variable initialization

web-deployment

reactjs

mern