Fetch获取含数组的对象，如何转为可map的对象数组？

你遇到的问题是因为接口返回的是包含数组的顶层对象，而非直接的数组，所以没法直接对整个对象执行map操作。解决步骤如下：

1. 确认返回数据的结构
   在list函数里打印connection.json()返回的结果，就能看到顶层对象里的数组对应的键名。比如你提供的这个接口，返回结构是：

   {
     "portfolio": [/* 你的数组数据 */]
   }
   

   这里的数组对应的键名是portfolio。

2. 提取数组并更新状态
   把顶层对象里的数组属性提取出来，再传给setItems，这样items就变成了可以用map遍历的数组。修改后的代码如下：

useEffect(() => {
  list();
}, []);

async function list(){
  try{
    const connection = await fetch("https://my-json-server.typicode.com/priscilasilvaalves/priscilasilvaalves.github.io/db");
    const data = await connection.json();
    // 提取对象里的数组，这里用portfolio作为键名，替换成你实际的键即可
    const itemsArray = data.portfolio;
    setItems(itemsArray);
    // 直接打印提取后的数组，不要打印items（setState是异步操作，此时items还未更新）
    console.log(itemsArray);
  }catch(error){
    console.log(error);
  }
}

3. 额外提示
   React的setState是异步操作，你原来的console.log(items)大概率看不到最新的状态值。如果要验证items是否更新，要么直接打印提取后的itemsArray，要么添加一个监听items的useEffect：

   useEffect(() => {
     console.log(items);
   }, [items]);
   

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