React JS中无法将异步请求获取的数据存入state且无法在HTML中渲染

问题根因 #

axiosRequest.get是异步操作，你遍历发起请求后直接同步执行setCardData(newcard)时，所有请求尚未返回结果，此时newcard还是空数组。后续请求返回后往普通数组中push数据的操作，React无法检测到变更触发重渲染，因此页面没有更新。
另外你原有代码中的catch写法存在错误：.catch(console.log('err'))会在代码执行到此处时立即打印err，而非请求失败时才触发执行。

修复方案 #

将所有异步请求包装为Promise集合，通过Promise.all等待所有请求完成后统一更新state，同时补充缺失的依赖项：

useEffect(() => {
  if (!cardTypeData) return;
  // 收集所有合法请求的Promise实例
  const requestPromises = cardTypeData
    .filter(item => !!item.Slug)
    .map(item => {
      const requestUrl = `chartconfig/${item.Slug}/${
        searchQuery?.year
          ? `?year=${searchQuery.year}${
              searchQuery.month ? "&month=" + searchQuery.month : ""
            }`
          : ``
      }`;
      return axiosRequest.get(requestUrl).then(res => res.data);
    });

  // 等待所有请求完成后批量更新state
  Promise.all(requestPromises)
    .then(cardDataList => {
      console.log('list', cardDataList);
      setCardData(cardDataList);
    })
    .catch(err => console.log('请求出错：', err));
// 补充searchQuery为依赖项，查询参数变化时自动重新请求
}, [cardTypeData, searchQuery]);

可选优化 #

如果需要实现单个请求失败不影响其他正常请求的结果展示，可以把Promise.all替换为Promise.allSettled，后续再过滤出请求成功的结果存入state即可。如果要避免组件卸载时未完成的请求触发state更新警告，可以补充axios请求取消逻辑。

内容的提问来源于stack exchange，提问作者dream boy achyut