React调用API获取数据时如何解构外层包装对象提取目标数组

解决方法 #

问题核心是API返回的外层对象中，你需要的用户列表存在users属性下，直接修改响应数据处理逻辑和渲染逻辑即可：

方法1：直接取目标属性 #

修改fetch请求的响应处理逻辑，把users字段的值赋值给状态，同时调整渲染部分输出id和名称：

import React,{useState,useEffect} from 'react';

function App() {
  const [data,setData]=useState([]);
  const getData=()=>{
    fetch('src/data.json')
      .then(function(response){
        return response.json();
      })
      .then(function(myJson) {
        // 直接取外层对象的users字段赋值
        setData(myJson.users ?? [])
      });
  }
  
  useEffect(()=>{
    getData()
  },[])

  return (
    <ul>
      {data.map((item) =>
        {/* 同时输出id和name */}
        <li key={item.id}>{item.id} {item.name}</li>
      )}
    </ul>
  );
}

export default App;

方法2：用解构方式获取目标数组 #

也可以在解析响应的时候直接解构出users字段，写法更简洁：

.then(function({ users }) {
  setData(users ?? [])
})

代码里加的?? []是兜底逻辑，避免接口返回结构异常时users为undefined导致调用map方法报错。

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