React组件报错：TypeError: books.map is not a function 求助

错误原因 #

你的API返回的JSON结构中，书籍数组嵌套在results字段下，但当前代码直接将整个响应数据对象（包含status和results）赋值给了books状态。这样books变成了对象而非数组，自然无法调用数组的map方法，从而抛出TypeError: books.map is not a function错误。

你的API响应示例：

{"status":"Success","results":[{"id":1,"name":"Tenzi Za Rohoni","language":"Kiswahili"}]}

当前代码里的setBooks(response.data)会让books等于这个完整对象，而非里面的results数组。

修复步骤 #

1. 修正状态赋值逻辑 #

修改useEffect中的回调，将response.data.results赋值给books：

useEffect(() => {
    listBooks().then((response) => {
        // 取results字段作为书籍数组
        setBooks(response.data.results);
    }).catch(error => {
        console.error(error);
        // 请求失败时重置为数组，避免后续map报错
        setBooks([]);
    })
}, [])

2. 添加渲染时的空值保护（可选但推荐） #

为了避免数据未加载完成或请求失败时出现意外错误，可以在渲染map前添加判断，确保books是数组且有数据：

<tbody>
    {books && Array.isArray(books) && books.map(book =>
        <tr key={book.id}>
            <td>{book.id}</td>
            <td>{book.name}</td>
            <td>{book.language}</td>
        </tr>
    )}
</tbody>

3. 验证API响应格式（可选） #

如果后端无法修改响应格式，确保前端始终正确解析即可。如果可以调整后端，也可以让API直接返回书籍数组，但不是必须的，前端正确解析即可。

完成上述修改后，books状态会正确存储书籍数组，就能正常调用map方法渲染列表了。

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