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

Question

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

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

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

Answer 1

您应该使用this.props.match.params 访问来自该网址的id。

    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 Form api。

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

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

Answer 2

尝试不带选项的useEffect，它会在页面第一次加载时运行

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

Answer 3

基于您希望 props.onLoad 在定义的“id”或定义的“id”更改时运行的假设：

从 useEffect 挂钩返回函数（就像使用 return props.onLoad(...) 所做的那样）专门用于“清理”副作用或订阅等内容。在 useEffect 挂钩中返回的函数只会在组件卸载时运行。请参阅文档here。此外，您似乎甚至没有传递一个在清理时运行的函数。您正在传递 props.onLoad 的结果以在清理时运行，根据函数名称，它似乎并不打算返回另一个函数。

因此，如果您希望 props.onLoad() 在定义了“id”的情况下运行，请删除 props.onLoad 之前的返回。该返回告诉 React 保留（它认为是一个函数）以在卸载时进行清理。如果它仍然不起作用，我想我们需要更多关于 props.onLoad 到底在做什么的信息。