Question

这是我的问题：

我要运行两个useEffects来初始化表单值。

我需要帮助找出正确的方法。

以下是效果：


  useEffect(() => {
    if (fetchedIssue !== null) {
      setIssueUpdateArray(() => {
        return fetchedIssue.issueUpdates.map(issueUpdate => issueUpdate.issueUpdateGuid);
      });

      setActionArray(() => {
        return fetchedIssue.actions.map(action => action.actionGuid);
      });
    }
  }, [fetchedIssue]);

  useEffect(() => {
    if (fetchedIssue !== null) {
      populateFormObj(setValue, mapIssueToFormValues(fetchedIssue));
    } else {
      populateFormObj(setValue, defaultFormValues);
    }
  }, [fetchedIssue, setValue]);

但是当我渲染表单时，它是空的，我认为是因为setIssueArray和setActionArray 在运行populateFormObj之后发生。

据我所知，React中的setter是如何工作的？

所以我的第一种方法是像这样将它们结合起来：

  useEffect(() => {
    const initializeForm = () => {
      if (fetchedIssue !== null) {
        setIssueUpdateArray(() => {
          return fetchedIssue.issueUpdates.map(issueUpdate => issueUpdate.issueUpdateGuid);
        });

         setActionArray(() => {
          return fetchedIssue.actions.map(action => action.actionGuid);
        });

        populateFormObj(setValue, mapIssueToFormValues(fetchedIssue));
      }
      else populateFormObj(setValue, defaultFormValues);

    };

    initializeForm()
  }, [fetchedIssue, setValue]);

直到我使initializeForm函数异步如下：

useEffect(() => {
    const initializeForm = async () => {
      if (fetchedIssue !== null) {
        await setIssueUpdateArray(() => {
          return fetchedIssue.issueUpdates.map(issueUpdate => issueUpdate.issueUpdateGuid);
        });

        await  setActionArray(() => {
          return fetchedIssue.actions.map(action => action.actionGuid);
        });

        populateFormObj(setValue, mapIssueToFormValues(fetchedIssue));
      }
      else populateFormObj(setValue, defaultFormValues);

    };

    initializeForm()
  }, [fetchedIssue, setValue]);

它奏效了。

到目前为止，我还没有看到这样做，所以我想知道这是否是不好的做法，以及是否有更好的方法来实现相同的结果。

谢谢

Answer 1

好的，所以我意识到我在错误地看待这个问题。

这是我想出的：


  useEffect(() => {
    if (fetchedIssue !== null) {
      const { mappedIssueUpdates } = mapIssueToFormValues(fetchedIssue);
      populateFormObj(setValue, mappedIssueUpdates);
    }
  }, [fetchedIssue, issueUpdateArray, setValue]);

  useEffect(() => {
    if (fetchedIssue !== null) {
      const { mappedActions } = mapIssueToFormValues(fetchedIssue);
      populateFormObj(setValue, mappedActions);
    }
  }, [actionsArray, fetchedIssue, setValue]);

  useEffect(() => {
    if (fetchedIssue !== null) {
      const { mappedValues } = mapIssueToFormValues(fetchedIssue);
      populateFormObj(setValue, mappedValues);
    } else {
      populateFormObj(setValue, defaultFormValues);
    }
  }, [fetchedIssue, setValue]);

每个useEffect都会更新表单本身。因此，每当更新issueUpdateArray和actionArray时，我都会填充表单。

如何正确结合这两种用途

1 个答案: