TypeError：刷新页面时无法读取未定义的属性（读取“img”）

Question

我正在使用 Redux 创建一个 React 应用程序。通过 Axios 获取数据，她正在工作。图片是使用效果

然后我将数据导入到我的一个组件中，她正在工作。

这张图片显示了如何

然后我尝试取值，调整它，然后返回一个新值 当我运行程序时它可以工作，但是当我刷新页面时，会发生错误

我的组件代码

     import React,{useState,useEffect} from 'react'
  import {useSelector} from "react-redux"
  import{Products,Filters,Cards} from  "./Styled"
   
  export  function Prodacts() {
      const [toggleFilter,setToggleFilter]=useState(false)
      const [filteredData,setFilterdData]=useState([])
      const[limitList,setLimetList]=useState(9)
      const ProductsData = useSelector(state=>state.productData)
  
  



       const handelFilter=(e)=>{
       const filter=e;
       
       if(filter==="women"){
       return setFilterdData( ProductsData.filter((e)=>filter===e.category))
       }
       else if(filter==="men"){
           return  setFilterdData(ProductsData.filter((e)=>e.category===filter))
           }
           else if(filter==="accessories"){
               return setFilterdData( ProductsData.filter((e)=>e.category===filter))
               }
               else return setFilterdData(ProductsData)
       }
       
       
       const displayProduct=()=>(
       
           <Cards>
              {
                    
           filteredData.map((e)=>(
          <div>
           <div>
           <img src={e.img} alt="img"/>
               <button>Quick View</button>
           </div>
           <div>
               <h4>{e.name}</h4>
               <span>{e.price}</span>
           </div>
           
       </div>
               )
              
            )
           }
        
           </Cards>
           
       )
       
           const updateData=()=>{
               const data=[]
           for(let i=0;i<limitList;i++){
             
           data.push(ProductsData[i])
           }
           setFilterdData(data)
           }
          
       useEffect(()=>{
           updateData()
       },[filteredData])
       
       
       
       const Filter=()=>(
        <Filters>
           <div>
               <span  onClick={()=>handelFilter("All Products")}>All Products</span>
               <span  onClick={()=>handelFilter("women")}>women</span>
               <span  onClick={()=>handelFilter("men")}>Men</span>
               <span  onClick={()=>handelFilter("accessories")}>Accessories</span>
               
           </div>
           <div>
       <button className={toggleFilter?'fas fa-times':'fas fa-filter'}>Filtter</button>
       <button className={!toggleFilter?'fas fa-search':' fas fa-times '}>Filtter</button>
           </div>
           </Filters>
           )
       
           return (
       <Products className="container">
       <h2>PRODUCT OVERVIEW</h2>
       { Filter()}
       {displayProduct()}
       </Products>
           )
       }

Answer 1

在您显示的代码中，img 仅在一处作为属性读取，此处显示的缩进已更正：

<Cards>{
    filteredData.map((e)=>(
        <div>
            <div>
                <img src={e.img} alt="img"/>
                <button>Quick View</button>
            </div>
            <div>
                <h4>{e.name}</h4>
                <span>{e.price}</span>
            </div>
        </div>
    ))
}</Cards>

这告诉我们undefined 的值最终会成为filteredData 中的一个元素。

你设置filteredData的地方（通过setFilterdData [原文如此]）都使用ProductsData。他们中的大多数人在上面使用filter，但updateData 这样做（此处显示已纠正缩进并添加了各种缺少的分号）：

const updateData = () => {
    const data = [];
    for (let i = 0; i < limitList; i++) {
        data.push(ProductsData[i]);
    }
    setFilterdData(data);
};

这告诉我们正在发生两件事之一：

1. ProductsData 中至少有一个 undefined 元素，或者
2. 在updateData 中，ProductsData 中的元素少于limitList（即ProductsData.length 少于limitList）。

#1 我帮不了你，不清楚这些数据来自哪里。

但#2 似乎是一个非常可能的问题，limitList 的值比 ProductsData 中的产品更高。如果是这样，您需要尽快结束该循环：

const updateData = () => {
    const data = [];
    for (let i = 0, max = Math.min(limitList, ProductsData.length); i < max; i++) {
        data.push(ProductsData[i]);
    }
    setFilterdData(data);
};

或更简洁：

const updateData = () => {
    setFilterdData(ProductsData.slice(0, limitList));
};

...如果limitList 超出它的末尾，它也会在ProductsData 的长度处停止。