React中发起AJAX请求：如何处理直接返回数组的接口数据

嘿，我看你遇到的问题很典型——你的Class组件能正常处理那种返回外层带data字段的接口，但碰到像jsonplaceholder直接返回数组的接口就没法展示数据了对吧？

问题根源 #

你原来的代码里，在fetch的回调中是把result.data赋值给了state里的data：

this.setState({ data: result.data });

但像https://jsonplaceholder.typicode.com/posts这类接口，返回的result本身就是一个数组，根本没有外层的data属性，这时候result.data就是undefined，你再用data.map()自然就会报错啦。

解决办法 #

这里有两种处理方式，你可以根据需求选择：

1. 针对特定接口直接修改

如果确定接口是直接返回数组的，那直接把result赋值给state即可：

componentDidMount() {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then((result) => {
      // 直接使用result，因为它本身就是我们需要的数组
      this.setState({ data: result });
    })
    // 建议加上错误捕获，避免请求失败导致组件崩溃
    .catch(error => {
      console.error('请求失败:', error);
      this.setState({ data: [] });
    });
}

2. 兼容两种返回格式（更健壮）

如果你的组件可能要调用不同格式的接口，那可以加个判断，让它自动识别返回的是数组还是带data字段的对象：

componentDidMount() {
  fetch('你的目标接口地址')
    .then(res => res.json())
    .then((result) => {
      // 判断返回结果是否为数组，是就直接用，否则取result.data，兜底为空数组
      const fetchedData = Array.isArray(result) ? result : (result.data || []);
      this.setState({ data: fetchedData });
    })
    .catch(error => {
      console.error('请求出错:', error);
      this.setState({ data: [] });
    });
}

额外小提示 #

另外，React中使用map渲染列表时，必须给每个子元素加上唯一的key属性，这能帮助React高效更新DOM。你原来的代码里没加，建议补上：

render() {
  const { data } = this.state;
  return (
    <div>
      {data.map(datalist => (
        <p key={datalist.id}> {/* 这里加上key，用每个项的唯一id */}
          {datalist.id} - {datalist.title} {/* 注意对应接口返回的字段，比如jsonplaceholder的posts是title不是name */}
        </p>
      ))}
    </div>
  );
}

这样不管接口返回的是直接数组还是带data字段的对象，你的组件都能正常工作啦！

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