在 useEffect 钩子的 if 条件中调用异步函数

Question

如何在 useEffect 钩子的 if 块中调用 redux action：

useEffect(async () => {
    if (nameId && selectedGroup === 'AGM') {
        const subPeople = await getSubPeople(nameId);
    }
}, [nameId, selectedGroup]);

我有两个选择框。如果用户在 name 选择框中输入，我会将所选的 name 的id存储在 nameId 状态中。如果用户选择了一个组，我会将其存储在 selectedGroup 中，因此只有当两个条件都符合时，才需要调用API端点来获取 subPeople。

如果我注释掉这段代码，则不会出现错误。如何使代码片段正常工作？

- Learner

---

有人专门为此编写了useAsyncEffect，此外还有这个在SO上的问题可能会有所帮助。 - Bravo

Answer 1

你可以将异步逻辑移到一个独立的函数中，并在 useEffect 内部调用它，因为 useEffect 的回调函数本身不能是异步的：

useEffect(() => {
  const getPeople = async () => {
    if (nameId && selectedGroup === 'AGM') {
      const subPeople = await getSubPeople(nameId);
      return subPeople; // Or set the state, etc.
    }
  }
  getPeople(); 
}, [nameId, selectedGroup]);

- Clarity