React使用axios获取数据后提取date字段生成新数组的问题

• React的setState系列方法是异步更新的，调用setdate(response.data.data)后，当前作用域内的date变量不会立刻被更新，此时访问date拿到的还是初始的空数组，所以遍历后得到的NewArray为空
• 你现有的map逻辑返回的是包含<span>元素的数组，和你需要的纯日期字符串数组格式不符

你可以直接使用接口返回的数据做处理，不需要依赖刚更新的state：

const [date, setdate] = React.useState([]);
// 可选：如果需要存储日期数组可以单独声明state
const [pureDateList, setPureDateList] = React.useState([]);

useEffect(() => {
  axios
    .get("http://localhost:8000/api/profilevisit/all/" + params.id)
    .then((response) => {
      const resData = response.data.data;
      setdate(resData);
      // 直接处理接口返回的原始数据
      const targetDateArr = resData.map(item => item.date);
      console.log(targetDateArr); // 输出 ['2021-05-15', '2021-05-16']
      // 需要存到state的话执行下面这行
      setPureDateList(targetDateArr);
    })
    .catch((err) => console.log(err));
}, []);

如果你需要等date state更新完成后再做处理，可以单独加一个监听date变化的副作用：

useEffect(() => {
  // 排除初始空数组的情况
  if (!date.length) return;
  const targetDateArr = date.map(item => item.date);
  console.log(targetDateArr);
}, [date]);

内容的提问来源于stack exchange，提问作者AlyaKra