Встретились два ребенка с одинаковым ключом... сайт электронной коммерции

Почему существует два дочерних элемента с одинаковым ключом Я использую React и пытаюсь сделать сайт электронной коммерции. Я не понимаю ошибку двойных ключей

import React, {useEffect} from 'react'
import { Link, useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom' 
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col, ListGroup, Image, Form, Button, Card} from 'react-bootstrap'
import  Message  from  '../components/Message'
import { addToCart } from '../actions/cartActions'

export default function CartScreen() {
const { id} = useParams()
const { search } = useLocation();
const [searchParams] = useSearchParams();
const dispatch = useDispatch();
 
const productID = id;
const qty = search ? Number(search.split("=")[1]) : 1;

const cart = useSelector(state => state.cart)
const { cartItems} = cart 
console.log('cartItems:', cartItems)

useEffect(() => {
   if(productID) {
      dispatch(addToCart(productID, qty))
   }

}, [dispatch, productID, qty]) 
  
  return (
    <Row>
        <Col md={8}>
                <h1>Shopping Cart</h1>
                {cartItems.length === 0 ? (
                    <Message variant='info'>
                        Your cart is empty <Link to='/'>Go Back</Link>
                    </Message>
                ) : (
           <ListGroup varient='flush'>
            {cartItems.map(item => (
              <ListGroup.Item key= { item.product }>
                <Row>
                  <Col md={2}>
                       <Image src={item.image} alt={item.name} fluid rounded/>
                  </Col>
                  <Col md={3}>
                      <Link to={`/product/${item.product}`}>{item.name}</Link>
                  </Col>

                  <Col md={2}>
                      ${item.price}
                  </Col>
                </Row>
              </ListGroup.Item>
              ))}
           </ListGroup>
          )}
      </Col>

      <Col md={4}> 
      
      </Col>
    </Row>
  )
}

Я пытаюсь загрузить изображения корзины в CartScreen и он говорит мне, что есть два дочерних элемента с одинаковым ключом

В React при использовании следующего

<ListGroup.Item key= { uniqueID }>

Каждое значение key должно быть уникальным, чтобы оно могло однозначно идентифицировать каждый элемент списка.

Больше помощи от этой темы.

key не является уникальным для отрисованных элементов, React обнаружил два элемента с одинаковым ключом. Не могли бы вы попробовать изменить JSX карты внутри map.

 <ListGroup varient='flush'>
            {cartItems.map((item, index) => (
              <ListGroup.Item key= { `${item.product}i${index}` }>
                <Row>
                  <Col md={2}>
                       <Image src={item.image} alt={item.name} fluid rounded/>
                  </Col>
                  <Col md={3}>
                      <Link to={`/product/${item.product}`}>{item.name}</Link>
                  </Col>

                  <Col md={2}>
                      ${item.price}
                  </Col>
                </Row>
              </ListGroup.Item>
              ))}
           </ListGroup>

Вы можете использовать UniqueId из lodash, чтобы иметь уникальный Id для каждого ряда, что решит эту проблему:

const cartItems: Array<{[x: string]: any}>=[{}]
//after getting cartItems array
cartItems.map((item)=>item.uid=_.uniqueId('cartItem_'));

//...
//when you are using cartItems to display list of items

cartItems.map((item)=>(
    <CartItem key={item.uid}></CartItem>
))
Вернуться на верх