如何解决TypeError:items.map不是函数

Question

我创建了一个Redux减速器来导航。最初，localhost打开得很好，但当我转到另一个页面并尝试返回时，出现了一个错误，说明了以上内容。

错误

TypeError: items.map is not a function
HomeScreen
E:/College/DA/IWP/Book Fair/frontend/src/Screens/HomePage.js:26
23 | return loading?<div>Loading...</div>:
24 | error ?<div>{error}</div>:    
25 | (
> 26 |   <ul className="items">
| ^  27 | {
28 |   items.map(book=>
29 |     <li key={book._id}>

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
// import axios from 'axios';
import { useSelector, useDispatch } from 'react-redux';
import { listItems } from '../actions/ItemsActions';

function HomeScreen(props){
const bookList = useSelector(state=>state.bookList);
const {items, loading, error} = bookList;
const dispatch = useDispatch();
useEffect(() => {
dispatch(listItems());
return() =>{

};
}, [])

// Error that cannot render hence add below lines before ul
return loading?<div>Loading...</div>:
error ?<div>{error}</div>:    
(
<ul className="items">
{
items.map(book=>
<li key={book._id}>
<div className = "book">
<img className="bookimage"src = {book.image} alt = "book 1"></img>
<div className="bookname"><Link to ={'/book/' + book._id}>{book.name}</Link></div>
<div className="author">{book.author}</div>
<div className="cost">Rs. {book.cost}</div>
<div className="rating">Stars: {book.rating} ({book.numReview} Reviews)</div>
</div>
</li>
)
}

</ul>
)

}
export default HomeScreen;

这是主页。

我怀疑在返回时，主页读取了错误的函数，items.map没有返回map。我已经尝试更改API链接，但它不起作用。

Answer 1

我怀疑loading道具在您随后返回此页面时被设置为False。

在对items数组进行迭代之前，您可能需要添加一个检查。

{
items.length > 0 && items.map(book=>
<li key={book._id}>
<div className = "book">
<img className="bookimage"src = {book.image} alt = "book 1"></img>
<div className="bookname"><Link to ={'/book/' + book._id}>{book.name}</Link></div>
<div className="author">{book.author}</div>
<div className="cost">Rs. {book.cost}</div>
<div className="rating">Stars: {book.rating} ({book.numReview} Reviews)</div>
</div>
</li>
)
}

Answer 2

试试这个：

Array.isArray(items) && items.map(book=>
<li key={book._id}>
<div className = "book">
<img className="bookimage"src = {book.image} alt = "book 1"></img>
<div className="bookname"><Link to ={'/book/' + book._id}>{book.name}</Link></div>
<div className="author">{book.author}</div>
<div className="cost">Rs. {book.cost}</div>
<div className="rating">Stars: {book.rating} ({book.numReview} Reviews)</div>
</div>
</li>
)

Answer 3

当API第一次调用时，它不会立即返回数据，因此在发送响应之前，您可能需要检查返回的响应是否为数组。

app.get("/api/items", (req, res)=>{
if(Array.isArray(data.items)){
res.send(data.items);
}

});

或者在客户端中，在迭代之前检查项是否为数组以避免错误。