React中使用useState与axios无法获取数组数据的问题

问题描述 #

需要从后端返回的如下结构数据中：

[
  {
    "ymd": "2019-01-02",
    "dailyRevenue": 3464
  },
  {
    "ymd": "2019-01-03",
    "dailyRevenue": 3051
  },
  {
    "ymd": "2019-01-04",
    "dailyRevenue": 3495
  },
  {
    "ymd": "2019-01-05",
    "dailyRevenue": 4770
  },
  {
    "ymd": "2019-01-06",
    "dailyRevenue": 4907
  },
  {
    "ymd": "2019-01-07",
    "dailyRevenue": 2880
  }
]

提取ymd字段存入revenueHistoryLabel数组（格式如['2019-03-12', '2019-09-24']），提取dailyRevenue字段存入revenueHistoryData数组（格式如[432,345]）。但执行下方代码后，两个数组始终为空：

export default function Dashboard() {
    const API_URL = 'http://localhost:8000/api/';
    const reLabel = ['2019-03-12', '2019-09-24'],       reData = [432,345];
    const [revenueHistoryLabel, setRevenueHistoryLabel] = useState([]);
    const [revenueHistoryData, setRevenueHistoryData] = useState([]);

    useEffect(() => {
        axios.get(API_URL + 'revenues').then((res) => {
            setRevenueHistoryLabel(
                ...revenueHistoryLabel,
                res.data.map((element) => element.ymd),
            );
            setRevenueHistoryData(
                ...revenueHistoryData,
                res.data.map((element) => element.dailyRevenue),
            );
        });
    }, []);

修复方案 #

问题出在setState的调用方式错误：你把数组元素展开作为参数传递，但setState需要接收的是完整的新状态值，而不是分散的元素。

修正后的代码如下：

export default function Dashboard() {
    const API_URL = 'http://localhost:8000/api/';
    const [revenueHistoryLabel, setRevenueHistoryLabel] = useState([]);
    const [revenueHistoryData, setRevenueHistoryData] = useState([]);

    useEffect(() => {
        axios.get(API_URL + 'revenues').then((res) => {
            // 直接将map返回的数组作为新状态赋值
            setRevenueHistoryLabel(res.data.map(element => element.ymd));
            setRevenueHistoryData(res.data.map(element => element.dailyRevenue));
        });
    }, []);

补充说明 #

如果后续需要在已有数组基础上追加新数据（而非覆盖），才需要用扩展运算符合并数组，写法应为：

setRevenueHistoryLabel(prev => [...prev, ...newDataLabels]);
setRevenueHistoryData(prev => [...prev, ...newDataValues]);

这里因为是首次请求数据，直接赋值map后的结果即可，无需合并初始空数组。

内容的提问来源于stack exchange，提问作者Khang-Truong