时间戳

首页 > 解决方案 > 页面重新加载时如何使用useEffect deps？

javascript - 页面重新加载时如何使用useEffect deps？

问题描述

我得到了带有文章的简单博客，当用户单击编辑按钮时，他得到的表格中充满了文章数据——标题、描述、正文和标签。当我得到“id”时，我使用 useEffect 获取数据并填写表格。如果没有“id”表格应该是空白的。这是我的使用效果：

useEffect(() => {
    if (id) {
      isLoading = true;
      return props.onLoad(userService.articles.get(id));
    }
    props.onLoad(null);
    }, [id]
  );

但是当我重新加载页面 id 时没有改变，并且 func userService.articles.get(id) 没有运行，所有数据都消失了。我需要建议如何解决它？可能是我需要使用其他部门来实现 useEffect，但现在我不知道我可以使用哪些部门来使用 exept id。

更新：谢谢大家的帮助。我想要的是：

  1. 当编辑页面加载/重新加载和“id”存在时->填写表单字段
  2. 当“id”不存在时 -> 空白表单域

现在，当我重新加载编辑页面时，我得到了 id - 但所有数据都消失了，我得到了空白表格:(

这是完整的代码：codesandbox

ps 我使用免费的 API - 因此您可以在几秒钟内使用任何想象的电子邮件、用户名和密码创建用户。您不需要邮件确认。

标签： javascriptreactjsreact-hooks

解决方案

您应该使用this.props.match.params来访问id来自 url 的内容。

    useEffect(() => {
      if (props.match.params.id) {
        setIsloading(true);
        userService.articles.get(props.match.params.id)
          .then((resp) => {
            setIsloading(false);
            props.onLoad(resp)
         })
    } else {
      props.onLoad(null);
    }
  }, [props.match.params.id]);

此外，您应该依靠useState来管理您的isLoading变量。

 const [isLoading, setIsloading] = useState(false);

我对您提供的代码做了更多的研究。将initialValues首先为空，因为来自 的数据props尚不存在。一旦initialValues设置好了就不能动态地改变它们，你必须求助于 antd Formapi。

您不能通过 value 或defaultValue prop 为每个表单控件设置值，您应该使用initialValuesForm 设置默认值。请注意，initialValues不能setState动态更新，您应该setFieldsValue在这种情况下使用。

这里的关键是使用另一个useEffect依赖于来自 的表单值，props并使用它们通过 重置表单值setFieldsValue。

推荐阅读