React中如何映射API数据？仅提取名称存入数组的技术求助

我帮你梳理下当前代码的问题，以及如何正确提取联系人名称并更新到数组中：

1. 先明确API返回的数据结构 #

你调用的API返回的是一个联系人数组，每个联系人对象包含firstName和lastName字段（不是直接叫name），所以我们需要把这两个字段组合成完整名称来使用。

2. 修正componentDidMount中的代码 #

你的原代码存在几个关键问题：

• fetch的then回调写法错误，第二个参数是错误处理函数，不能用来执行setState
• 直接arr.push(data)是把整个响应数组作为单个元素推入数组，而非遍历提取每个联系人的名称
• setState应该在数据处理完成后调用，确保拿到正确的处理后数据

修正后的代码如下：

componentDidMount() {
  const url = `https://contact-browser.herokuapp.com/contacts`;
  fetch(url)
    .then(resp => resp.json())
    .then((contacts) => {
      // 遍历联系人数组，拼接firstName和lastName为完整名称
      const nameArray = contacts.map(contact => `${contact.firstName} ${contact.lastName}`);
      // 处理完成后更新状态
      this.setState({ data: nameArray });
    })
    .catch(err => console.error('获取联系人数据失败:', err)); // 增加错误处理方便调试
}

3. 调整渲染部分的代码 #

现在this.state.data是一个纯名称字符串数组，渲染时直接输出即可，同时记得添加React列表要求的key属性：

{this.state.data.map((name, index) => (
  <li key={index}>{name}</li>
))}

关键说明 #

• 用Array.map()遍历API返回的联系人数组，针对性提取并拼接名称，生成我们需要的纯名称数组
• 将setState放在then的成功回调内，确保只有当数据成功获取并处理完成后，才更新组件状态
• 增加catch捕获请求异常，便于排查网络或API返回异常问题

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