ReactJs调用Yelp API后map报错：Cannot read property 'map' of undefined

看起来你遇到的问题很典型——异步请求数据时，要么是state赋值没对应到正确的数组，要么是渲染时机没处理好，导致尝试map一个undefined值。咱们一步步来排查和解决：

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

Yelp Search API的返回结果是一个嵌套对象，真正的商家数组是在response.data.businesses字段里，而不是直接的response.data。你说控制台打印出了20条结果的数组，大概率是你打印的是response.data.businesses，但赋值state时错误地用了response.data，导致state里存的是整个响应对象，而非要遍历的数组。

2. 检查并修正axios请求的state赋值 #

你的getYelp方法应该类似这样，确保把正确的数组赋值给state：

getYelp = () => {
  axios.get('https://api.yelp.com/v3/businesses/search', {
    headers: {
      Authorization: `Bearer 你的Yelp API密钥`
    },
    params: {
      term: '餐厅',
      location: '北京' // 替换成你的参数
    }
  })
  .then(response => {
    // 关键：把businesses数组赋值给state
    this.setState({ results: response.data.businesses });
    console.log(response.data.businesses); // 这里打印的才是要遍历的数组
  })
  .catch(err => {
    console.error('请求出错：', err);
  });
}

3. 确保state初始化正确 #

在组件的构造函数或者类属性里，要把存结果的state初始化为空数组，避免初始渲染时state是undefined：

class YourComponent extends React.Component {
  state = {
    results: [] // 初始化为空数组，而不是undefined
  };

  // ... 其他方法
}

4. 处理渲染时的异步数据 #

因为axios请求是异步的，组件第一次渲染时state里的results还是初始的空数组（或者如果没初始化就是undefined），所以在render里要先判断数组是否存在再遍历：

render() {
  return (
    <div>
      {/* 方式1：短路运算符判断 */}
      {this.state.results && this.state.results.map(business => (
        <div key={business.id}>
          <h3>{business.name}</h3>
          <p>{business.location.address1}</p>
        </div>
      ))}

      {/* 方式2：可选链操作符（ES2020+支持） */}
      {this.state.results?.map(business => (
        <div key={business.id}>
          <h3>{business.name}</h3>
          <p>{business.location.address1}</p>
        </div>
      ))}
    </div>
  );
}

5. 排查Promise未处理的错误 #

你还遇到了Unhandled rejection TypeError，这说明axios的catch块可能没正确捕获错误，或者你用了async/await但没加try/catch。如果你的getYelp是async函数，要改成这样：

getYelp = async () => {
  try {
    const response = await axios.get('https://api.yelp.com/v3/businesses/search', {
      headers: { Authorization: `Bearer 你的密钥` },
      params: { term: '餐厅', location: '北京' }
    });
    this.setState({ results: response.data.businesses });
  } catch (err) {
    console.error('请求失败：', err);
  }
}

按照上面的步骤调整后，应该就能解决map遍历undefined的问题了。

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