如何处理具有异步使用效果的数据？

Question

我想获取给定播放列表 ID 的曲目列表，我可以从服务器获取响应，并且我有一个组件可以显示数据是否已加载，但我不明白如何获取数据“ ” useEffect 的。

const Tracklist = () => {
  const playlistId = window.location.pathname.substring(
    window.location.pathname.lastIndexOf("/") + 1
  );

  const [loading, setLoading] = useState(false);
  const [trackData, setTrackData] = useState([playlistId]);

  useEffect(() => {
    const loadTracks = async () => {
      // Till the data is fetch using API
      // the Loading page will show.
      setLoading(true);

      // Await make wait until that
      // This comes back with the correct response btw
      const response = await fetchTracks(playlistId);


      // After fetching data stored it in posts state.
      setTrackData(response.data);

      // Closed the loading page
      setLoading(false);
    };

    // Call the function
    loadTracks();
  }, [playlistId]);

  console.log(trackData);

  let trackElement = (
    <>
        {trackData.map(function () {
          return (
            <>
            </>
          );
        })}
      </>
  );

  return (
    <>
      <section className="hero is-fullheight">
        <NavBar href="" src=""></NavBar>
        <div className="container">
          <div className="section"></div>
          <h2 className="m-3 subtitle">Bob</h2>
          <div className="is-flex-direction-column is-justify-content-center">
            <div className="is-align-content-flex-start is-flex is-flex-wrap-wrap">
              {loading ? <h4>Loading...</h4> : trackElement}
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

Tracklist.propTypes = {
  shown: PropTypes.string,
};

当我尝试引用 trackData 变量时，我只是得到一个未定义的值，我认为这是因为它在加载之前设置为 trackData？我只是有点迷失了对异步加载的反应。

Answer 1

您可以在加载曲目后链接

then()

对曲目执行某些操作；

useTracks().then(tracks => {
    setTrackData(tracks);
    setLoading(false);
})