如何访问JSON中enumerable对象的$values？React Axios调用问题

错误原因 #

1. 数组访问错误：response.data.listTasks.$values是任务数组，不是单个任务对象，直接通过.enumerable访问会得到undefined——数组本身没有enumerable属性，该属性属于数组内的每一个任务元素。
2. 属性名拼写错误：代码里写的是$value，但JSON结构中对应的属性是$values，多了一个s。

解决方案 #

根据需求分两种场景处理：

场景1：提取所有任务的enumerable.$values到统一数组

如果需要把所有任务的enumerable数组合并成一个大数组，使用flatMap：

useEffect(() => {
  axios
    .get(API_URL + `Task/GetTaskInGroup?GroupID=${id}`, {})
    .then((response) => {
      const allEnumerableValues = response.data.listTasks.$values.flatMap(task => task.enumerable.$values);
      setTaskList(allEnumerableValues);
    })
    .catch((error) => {
      console.log(error.response.data);
    });
}, [id]);

场景2：保留任务完整结构，替换enumerable为其$values数组

如果需要保留每个任务的其他数据（如id、name等），同时把enumerable字段换成对应的数组，使用map遍历转换：

useEffect(() => {
  axios
    .get(API_URL + `Task/GetTaskInGroup?GroupID=${id}`, {})
    .then((response) => {
      const processedTasks = response.data.listTasks.$values.map(task => ({
        ...task,
        enumerable: task.enumerable.$values
      }));
      setTaskList(processedTasks);
    })
    .catch((error) => {
      console.log(error.response.data);
    });
}, [id]);

内容的提问来源于stack exchange，提问作者Nguyen Tuong Thanh - K15 FUG C