useEffect：如何将数据按顺序放入状态

Question

请问如何通过use Effect获取数据
我要的流程如下
首先我要获取'cards'状态，给卡片填充数据，之后通过cardsPromises填充数据
但是我的代码获取不到cards和wordAll，空值就出来了
我觉得是因为卡片还是空的，不知道怎么按顺序操作。
请告诉我怎么做。

  const [wordAll, setWordAll] = useState([]);
  const [cards, setCards] = useState([]); 

  useEffect(() => {
    axios
      .get("http/api/words/", {
        headers: {
          Authorization: cookies.token,
        },
      })
      .then((response) => {
        setCards(response.data);
      })
      .catch((error) => {
        console.log(error);
      });

    const cardsPromises = cards.map((contents) =>
      axios.get(
        `http/api/words/detail_list/?contents=${contents.contents}`,
        {
          headers: {
            Authorization: cookies.token,
          },
        }
      )
    );
    console.log("cards", cards);

    Promise.all(cardsPromises)
      .then((response) => {
        console.log("resp", response.data);
        setWordAll(response.data);
      })
      .catch((error) => {
        console.log("err==>", error);
      });
  }, []);

Answer 1

你是对的，cards 数组在获取数据时的 useEffect 回调中仍然是空的。我建议转换为 async/await 并等待第一次提取解决并使用 that cards 的值来提取其余的数据。

const [wordAll, setWordAll] = useState([]);
const [cards, setCards] = useState([]); 

useEffect(() => {
  const fetchData = async () => {
    try {
      const{ data: cards } = await axios.get(
        "http/api/words/",
        {
          headers: {
            Authorization: cookies.token,
          },
        },
      );
      setCards(cards);

      const cardsPromises = cards.map((contents) =>
        axios.get(
          `http/api/words/detail_list/?contents=${contents.contents}`,
          {
            headers: {
              Authorization: cookies.token,
            },
          }
        );
      );
      const wordAllResponse = await Promise.all(cardsPromises);
      const wordAll = wordAllResponse.map(({ data }) => data);
      setWordAll(wordAll);
    } catch (error) {
      // handle any errors, rejected Promises, etc..
    }
  };

  fetchData();
}, []);

Answer 2

将您的第二次 axios 调用包装在一个函数中，并在第一次 axios 调用之后调用它 returns。

useEffect(() => {

  const getWords = (cards) => {
    const cardsPromises = cards.map((contents) =>
      axios.get(
        `http/api/words/detail_list/?contents=${contents.contents}`,
        {
          headers: {Authorization: cookies.token}
        }
      )
    );

    Promise.all(cardsPromises)
      .then((response) => {
        setWordAll(response.data);
      })
      .catch((error) => {
        console.log("err==>", error);
      });
  })

  axios
    .get("http/api/words/", {
      headers: { Authorization: cookies.token },
    })
    .then((response) => {
      const cards = response.data;
      setCards(cards);
      getWords(cards);
    })
    .catch((error) => {
      console.log(error);
    });
}, [])

现在依赖链更清晰了。

useEffect：如何将数据按顺序放入状态

useEffect: How to put data in the state in order

reactjs

axios

react-hooks

use-effect