如何使用第一个 API 请求中设置的 useState 向 React 中的第二个 API 发出单个请求

Question

因此，我首先调用 API 来获取和存储用户信息，但随后我需要对 API 进行第二次调用，以根据第一次调用的响应数据获取辅助信息。

我尝试了几种方法来做到这一点，其中一种方法确实有效，但并不是真正可以接受的方式。

以下是相关常数：

const thisUserID = localStorage.getItem('userID');

const [ listnames, setListNames ] = useState(null);
const [ listID, setListID ] = useState(null);
const [ listcontent, setListContent ] = useState(null);

第一次调用API：

useEffect(() => {
        axios.get(`/lists/user/${thisUserID}`)
            .then((response) => {
                console.log(response.data[0].listName);
                console.log(response.data[0]._id);
                setListNames(response.data[0].listName);
                setListID(response.data[0]._id);
            })
            .catch((err) => {
                console.error(err);
            });
    }, []);

我尝试使用第二个 useEffect() 进行第二次调用，如下所示：

useEffect(() => {
        console.log("listID = " + listID)
        axios.get(`/listcontent/user/${listID}`)
            .then((response) => {
                console.log(response.data);
                setListContent(response.data);
            })
            .catch((err) => {
                console.error(err);
            });
    }, []);

但是第一个useEffect中设置的listID为null。

我尝试使用 if 语句仅在 listID 具有如下值时运行：

if (listID) {
        console.log("listID = " + listID)
        axios.get(`/listcontent/user/${listID}`)
        .then((response) => {
            console.log(response.data);
            setListContent(response.data);
        })
        .catch((err) => {
            console.error(err);
        });
    }

这可以工作并成功调用 API 并返回我想要的数据，但它每秒多次不断地向 API 发出请求，我只需要它发出一个请求。

所以我尝试在 if 语句中添加第二个条件，如下所示：

    let sss = 0;

    if (listID && sss < 1) {
        sss = 1;
        console.log("listID = " + listID)
        axios.get(`/listcontent/user/${listID}`)
        .then((response) => {
            console.log(response.data);
            setListContent(response.data);
        })
        .catch((err) => {
            console.error(err);
        });
        console.log("sss = " + sss)
    }

但它只是不断地调用 API，即使控制台日志显示 sss 为 1（或我设置的任何数字）。

作为最后一次尝试，我尝试在 if 语句中添加 useEffect，但这永远不会起作用，也没有成功。

我使用 React 的时间并不长，但我觉得一定有一种我缺少的相对简单的方法，或者只是不知道如何做到这一点，因为人们肯定经常做这样的事情。如果有人能看到我在哪里犯了错误或者知道我如何解决这个问题，我很感激任何帮助。如果我可以提供更多有用的信息/代码，请告诉我，谢谢。

Answer 1

在第二个useEffect中添加ListId作为依赖项。

useEffect(() => {
  console.log("listID = " + listID);
  if (listID) {
    axios
      .get(`/listcontent/user/${listID}`)
      .then((response) => {
        console.log(response.data);
        setListContent(response.data);
      })
      .catch((err) => {
        console.error(err);
      });
  }
}, [listID]);

Answer 2

使用 Promise 链在同一个

useEffect

块中进行两次调用，并避免需要在状态中保存冗余数据：

useEffect(() => {
  axios.get(`/lists/user/${thisUserID}`)
    .then((response) => {
      const { listName, _id } = response.data[0];
      setListNames(listName);
      setListID(_id); // remove if the listId is only use for the 2nd request
      
      return _id;
    })
    .then((id) => axios.get(`/listcontent/user/${id}`)) // make 2nd call when the id (list's id) is available 
    .then(({ data }) => {
      setListContent(data);
    })
    .catch((err) => {
      console.error(err);
    });
}, []);

您还可以使用 async/await 扁平化代码，使其更具可读性：

useEffect(() => {
  const callApis = async () => {
    try {
      const user = axios.get(`/lists/user/${thisUserID}`)
      const { listName, _id } = user.data[0];
      setListNames(listName);
      setListID(_id); // remove if the listId is only use for the 2nd request

      const list = await axios.get(`/listcontent/user/${id}`); // make 2nd call when the id (list's id) is available 
      setListContent(list.data);
    } catch(err) {
      console.error(err);
    }
  };

  callApis();
}, []);