React中TypeError: books.map is not a function错误修复求助

我来帮你拆解下问题根源，然后一步步搞定它：

问题出在哪？ #

你遇到的报错主要来自两个核心点：

• 组件刚渲染时，this.state.books是你初始化的空数组[]，这时候books.data就是undefined，对undefined调用map方法自然会抛出错误。
• 虽然请求完成后你把接口返回的对象赋值给了books，但你没利用好已经设置的loading状态来控制渲染逻辑，导致数据还没加载完就尝试渲染列表。

修复方案&修改后代码 #

我们可以通过几个简单的改动解决问题，同时还能让代码更健壮：

import React from 'react';
export class Books extends React.Component {
  state = { loading: true, books: [] }

  componentDidMount() {
    fetch('**url**')
      .then(res => res.json())
      .then((data) => {
        // 把接口返回的书籍数组直接存在state里，语义更清晰
        this.setState({ books: data.data || [], loading: false })
      })
      .catch(err => {
        console.log(err);
        // 请求失败也要把loading设为false，避免一直卡在加载状态
        this.setState({ loading: false });
      })
  }

  render() {
    const { loading, books } = this.state;

    // 加载中时显示提示，避免访问未就绪的数据
    if (loading) {
      return <div>加载中...</div>;
    }

    // 没有数据时给个友好提示
    if (!books.length) {
      return <div>暂无书籍数据</div>;
    }

    // 数据就绪后渲染列表，记得加唯一key
    return (
      <div>
        {books.map((book) => (
          <h1 key={book.id}>{book.name}</h1>
        ))}
      </div>
    );
  }
}

代码细节解释 #

1. 优化state赋值：把接口返回的data.data（也就是真正的书籍数组）直接赋值给state.books，如果接口返回的data.data不存在，就用空数组兜底，避免后续报错。
2. 利用loading做条件渲染：在数据加载完成前，只显示加载提示，彻底避免在数据未就绪时调用map。
3. 空状态处理：当书籍数组为空时，给用户显示友好提示，提升体验。
4. 添加key属性：这是React列表渲染的要求，能提升渲染性能，还能避免控制台警告。

如果你想保持原来的state结构（把整个接口返回对象存在books里），也可以这样修改render部分：

render() {
  const { loading, books } = this.state;

  if (loading) {
    return <div>加载中...</div>;
  }

  // 先确认books.data是数组再调用map，兜底用空数组
  const bookList = Array.isArray(books.data) ? books.data : [];

  return (
    <div>
      {bookList.map((book) => (
        <h1 key={book.id}>{book.name}</h1>
      ))}
    </div>
  );
}

这样也能完美解决报错，同时覆盖了各种异常情况。

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