第 27:15 行：'item' 未定义 no-undef答案

【问题标题】：Line 27:15: 'item' is not defined no-undef第 27:15 行：'item' 未定义 no-undef
【发布时间】：2022-02-09 00:25:07
【问题描述】：

当我在购物车中添加产品时，汽车中没有显示任何内容，并且屏幕上显示“未找到项目”错误，当我尝试使用空检查和 npm start 时，未显示错误但仍然显示页面。

import React  from 'react';
import Header from './Front/Header/Header';

const Cart = ({ cartitems ,handleAddProduct,handleRemoveProduct} ) => {

  return (
    <>
<Header />
        <div className="cart-items">
          <div className="cart-items-header"> cartitems</div>
          {!cartitems?.length ? (
            <div className="cart-items-empty"> No items added in cart</div>
          ) : null}
          <div>
            {cartitems?.length ? cartitems.map((item,name ,price ,image ,id) => (
              <img
                key={item.id}
                className="cart-items-image"
                src={item.image}
                alt={item.name}
              />
            )) : null}
          </div>
          <div>
  
            <h3 className='cart-items-name'>
             {item.name}</h3>
          </div>
          <div className='cart-items-function'>
           
          <button className='cart-items-add' onClick={() =>handleAddProduct(item)}>
             +
         </button>
         <button
           className='cart-items-remove' onClick={()=>handleRemoveProduct(item)}>
            -
         </button>
          </div>
          <div
            className='cart-items-price'>
            {item.quantity}* ${item.price}
          </div>
        </div>
      </>
  );
}

export default Cart;

【问题讨论】：

cartitems.map((item,name ,price ,image ,id) => 这不是map 的工作方式。回调的参数将是当前元素、当前元素的索引，最后是数组本身。
您遇到的错误与尝试在循环外使用 item 的 h3 标记有关，使其未定义。

标签： javascript html reactjs jsx

【解决方案1】：

我认为您的代码有 2 个问题：

首先，我假设您的cartitems 中的每个item 具有以下结构：

项目 = { 编号：1，名称：“我的项目”，价格：2，图片：“http://mybeautifulurl.org/image.png” }

如果是这种情况，您应该将item 作为map 函数中的唯一参数传递，并使用item.id、item.name、item.price 和item.image 访问每个道具。

您的某些代码不在map 函数中，但需要item，因此无法显示任何内容。

这是您的更新代码：

import React from "react";
import Header from "./Front/Header/Header";

const Cart = ({ cartitems, handleAddProduct, handleRemoveProduct }) => {
  return (
    <>
      <Header />
      <div className="cart-items">
        <div className="cart-items-header"> cartitems</div>
        {!cartitems?.length ? (
          <div className="cart-items-empty"> No items added in cart</div>
        ) : null}
        <div>
          {cartitems?.length
            ? cartitems.map((item) => (
                <>
                  <img
                    key={item.id}
                    className="cart-items-image"
                    src={item.image}
                    alt={item.name}
                  />
                  <div>
                    <h3 className="cart-items-name">{item.name}</h3>
                  </div>
                  <div className="cart-items-function">
                    <button
                      className="cart-items-add"
                      onClick={() => handleAddProduct(item)}
                    >
                      +
                    </button>
                    <button
                      className="cart-items-remove"
                      onClick={() => handleRemoveProduct(item)}
                    >
                      -
                    </button>
                  </div>
                  <div className="cart-items-price">
                    {item.quantity}* ${item.price}
                  </div>
                </>
              ))
            : null}
        </div>
      </div>
    </>
  );
};

export default Cart;

如果这能解决问题，请告诉我:)

【讨论】：