axios 如何将状态中的数据按顺序排列

w6lpcovy 于 5个月前发布在 iOS

关注(0)|答案(2)|浏览(47)

我想问一下如何通过useEffect()钩子获取数据。
我想要的流程如下。
首先，我想获取“cards”状态，用数据填充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);
      });
  }, []);

字符串

axios

来源：https://stackoverflow.com/questions/70912481/how-to-put-data-in-the-state-in-order

2条答案

按热度按时间

nkoocmlb1#

将第二个axios调用 Package 在一个函数中，并在第一个axios调用返回后调用它。

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);
    });
}, [])

字符串
现在的依赖链更清晰了。

赞(0）回复(0）举报 5个月前

m2xkgtsf2#

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

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();
}, []);

字符串

赞(0）回复(0）举报 5个月前

我来回答

axios 如何将状态中的数据按顺序排列

2条答案

相关问题

热门标签

最新问答