时间戳

首页 > 解决方案 > 如何解决 TypeError: items.map is not a function

node.js - 如何解决 TypeError: items.map is not a function

问题描述

我创建了一个 Redux reducer 来导航。最初本地主机打开正常，但是当我转到另一个页面并尝试返回时，出现上述错误。

错误

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 不返回地图。我尝试更改 API 链接，但它不起作用。

标签： node.jsreactjsredux

解决方案

我怀疑该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>
     )
  }

推荐阅读