如何在React JS中处理API返回数组并设置到state的person字段

很简单，你可以借助JavaScript的map()方法轻松实现这个需求——遍历原数组，只保留每个对象里需要的name和category属性，再把处理后的数组更新到组件的state里。

类组件中的实现代码 #

假设你已经从API拿到了resultArray，在类组件里可以这么写：

// 从API获取到的原始数组
const resultArray = [ 
  { "name": "Morgan", "category": "on", "dept": "A1" }, 
  { "name": "Lewis", "category": "on", "dept": "A2" }, 
  { "name": "Ivan", "category": "off", "dept": "A3" } 
];

// 处理数组：提取需要的属性，过滤掉dept
const processedPersons = resultArray.map(person => ({
  name: person.name,
  category: person.category
}));

// 更新到state
this.setState({ person: processedPersons });

函数组件中的实现（用useState钩子） #

如果是函数组件，逻辑完全一致，只是用useState替代类组件的state：

import { useState } from 'react';

function YourComponent() {
  const [person, setPerson] = useState([]);

  // 假设这里是获取API数据的逻辑，比如在useEffect里
  const fetchData = () => {
    const resultArray = [ 
      { "name": "Morgan", "category": "on", "dept": "A1" }, 
      { "name": "Lewis", "category": "on", "dept": "A2" }, 
      { "name": "Ivan", "category": "off", "dept": "A3" } 
    ];
    
    const processedPersons = resultArray.map(person => ({
      name: person.name,
      category: person.category
    }));
    
    setPerson(processedPersons);
  };

  // 调用fetchData，比如在组件挂载时
  // useEffect(() => { fetchData(); }, []);

  return <div>...</div>;
}

更简洁的写法（对象解构） #

如果你觉得逐个写属性有点繁琐，还可以用对象解构来直接忽略不需要的dept属性：

const processedPersons = resultArray.map(({ dept, ...rest }) => rest);

这里我们把每个对象里的dept解构出来并丢弃，剩下的name和category会被包含在rest对象里，直接返回rest就搞定了，效果和前面的写法完全一样。

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