javascript - 从异步函数获取数据到另一个函数 React JS

Question

我对异步函数有疑问。我在另一个函数中需要 track.user 但我的 func getTracks() 是异步的。我不知道我怎样才能得到这个。

const Player = ({trackUrl, index, cover, id}) => {
    const [track, setTrack] = useState({})
    const [user, setUser] = useState({})

    useEffect(() => {
        const getTracks = async () => {
            await httpClient.get(`/track/${id}`)
                .then((response) => {
                    setTrack(response.data);
                })
        }
        getTracks();
        getUser() // track.user undefined 
    }, [])

    const getUser = async() => {
        await httpClient.get(`/profile/${track.user}/`)
            .then((response) => {
                setUser(response.data);
            })
    }
}

Answer 1

我会在组件的开头声明这两个函数(您稍后可以使用 useCallback 优化它们，但在这个阶段它并不那么重要)。

const getTracks = async () => {
  await httpClient.get(`/track/${id}`)
    .then((response) => {
      setTrack(response.data);
    })
  }

const getUser = async() => {
  await httpClient.get(`/profile/${track.user}/`)
    .then((response) => {
      setUser(response.data);
  })
}

然后我会在 useEffect Hook 中调用一个 async 函数。有几种方法:您可以在 useEffect Hook 中声明一个 async 函数并立即调用它，或者您可以调用一个匿名的 async 功能。为简洁起见，我更喜欢后者，所以这里是:

useEffect(() => {
  (async () => {
    await getTracks();
    getUser();
  })();
}, []);

现在，当您调用 getUser 时，您应该确保 getTracks 已经设置了 track 变量。

这是完整的组件:

const Player = ({trackUrl, index, cover, id}) => {
  const [track, setTrack] = useState({})
  const [user, setUser] = useState({})

  const getTracks = async () => {
    await httpClient.get(`/track/${id}`)
      .then((response) => {
        setTrack(response.data);
      })
    }

  const getUser = async() => {
    await httpClient.get(`/profile/${track.user}/`)
      .then((response) => {
        setUser(response.data);
      })
    }

  useEffect(() => {
    (async () => {
      await getTracks();
      getUser();
    })();
  }, []);
}

编辑 22 年 7 月 18 日

正在关注 Noel的评论和链接sandbox ，我发现我的回答没有用。它不起作用的原因是 track 变量在 getTrack() Hook 执行后不可用:它在后续渲染中可用。

我的解决方案是添加第二个 useEffect Hook ，每次 track 变量更改时都会执行该 Hook 。我创建了两个带有 jsonplaceholder 端点的解决方案，一个(参见 here)保留了大部分原始解决方案但增加了复杂性，另一个(here)通过将这两种方法与 setTrack 和 setUser 钩子(Hook)。

我将在此处粘贴适合 OP 要求的更简单的。

export default function Player({ trackUrl, index, cover, id }) {
  const [track, setTrack] = useState({});
  const [user, setUser] = useState({});

  const getTracks = async () => {
    // only return the value of the call
    return await httpClient.get(`/track/${id}`);
  };

  const getUser = async (track) => {
    // take track as a parameter and call the endpoint
    console.log(track, track.id, 'test');
    return await httpClient.get(`profile/${track.user}`);
  };

  useEffect(() => {
    (async () => {
      const trackResult = await getTracks();
      // we call setTrack outside of `getTracks`
      setTrack(trackResult);
    })();
  }, []);

  useEffect(() => {
    (async () => {
      if (track && Object.entries(track).length > 0) {
        // we only call `getUser` if we are sure that track has at least one entry
        const userResult = await getUser(track);
        console.log(userResult);
        setUser(userResult);
      }
    })();
  }, [track]);
  return (
    <div className="App">{user && user.id ? user.id : "Not computed"}</div>
  );
}