列表中的每个孩子应该有一个独特的关键道具问题

问题描述

早上好，我遇到一个小问题。我想要有productdetails页面，其中显示了该产品的所有信息。您可以通过点击产品链接来做到这一点。但是我得到了以下错误：列表中的每个孩子都应该有一个唯一的关键道具问题

代码主页：

version: '3.3'
services:
  mongodb:
    image: mongo
    container_name: mongodb
    volumes:
      - mongodata:/data/db
    ports:
      - 27017:27017
volumes:
  mongodata:

代码产品页：

import React from 'react';
import data from '../data'

import { Link } from 'react-router-dom';
function Homescreen (props){
    return  <ul className="products" >
            { data.products.map(product => 
            <li key={product}>
            <div className="product-card">
              <Link to={'/product/' + product._id}>
              <img className="product-image" src={product.image} alt="product"></img>
              </Link>
              <Link to={'/product/' + product._id}><h1 className="product-name">{product.name}</h1></Link>
              <p className="product-price">€{product.price}</p>
          <div className="product.rating">Stars ({product.numReviews})</div>
              <form method="post">
              <button type="submit">Add to cart</button>
              </form>
            </div>
            </li>
          )
         
        }     
  
    
</ul>

}

export default Homescreen;

解决方法

您应该更改：

<li key={product}>

收件人（假设您的ID是唯一的）

<li key={product._id}>

选择键的最佳方法是使用一个字符串，该字符串唯一地标识其同级项中的列表项，您可以检查更多here

如{{3}}

所述

“键”是一种特殊的字符串属性，在创建元素列表时需要包括在内。

因此，key不能像您在此处使用它一样是对象，而必须是String。如果您的产品没有唯一标识符，则可以选择使用地图方法的index。

如果您对呈现的项目没有稳定的ID，则可以将项目索引用作最后的选择：

// Example from the ReactjS Website

const todoItems = todos.map((todo,index) =>
// Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

e-commerce javascript reactjs reactjs