javascript - 我不明白这个警告有什么问题 - 列表中的每个孩子都应该有一个唯一的“关键”道具

问题描述

我有这个警告，但我从Facebook查阅此页面： 警告：列表中的每个孩子都应该有一个唯一的“关键”道具。
这是我在控制台中的错误日志

我正在使用 React JS，我有一个名为 Card 的组件，它是 Carousel 的子组件和 Categories 的子组件

<Categories title='Gifs'>
      <Carousel>
        {
          productList.map((item) => <Card product={item} key={item.id} />)
        }
      </Carousel>
</Categories>

这是我的主页的样子：

import React from 'react';
import Categories from '../components/Categories';
import Carousel from '../components/Carousel';
import Card from '../components/Card';
import Lead from '../components/Lead';
// import firebase from '../firebase';

import '../assets/styles/App.scss';
import { productList, randomProduct } from '../api/request';

class Homepage extends React.Component {

  constructor(props) {
    super(props);
    console.log('Primero inicia el constructor');
    this.state = {
      productList: [],
      randomProduct: {},
    };
  }

  componentDidMount() {
    productList().then((productList) => this.setState({ productList }));
    randomProduct().then((randomProduct) => this.setState({ randomProduct }));
  }

  componentDidUpdate() {
    console.log('quinto actualiza los datos');
  }

  componentWillUnmount() {
    console.log('sexto desmuenta el componente --> lo elimina');
    clearTimeout(this.timeoutId);
  }

  render() {
    console.log('Segundo y Cuarto verifica que hay cambios por lo cual vuelve a reenderizar');
    const { productList, randomProduct } = this.state;
    return (
      <div className='App'>
        <Lead product={randomProduct} />
        <Categories title='Textiles'>
          <Carousel>
            {
              productList.map((item) => <Card product={item} key={item.id} />)
            }
          </Carousel>
        </Categories>
        <Categories title='Artesanias'>
          <Carousel>
            {
              productList.map((item) => <Card product={item} key={item.id} />)
            }
          </Carousel>
        </Categories>
        <Categories title='Gifs'>
          <Carousel>
            {
              productList.map((item) => <Card product={item} key={item.id} />)
            }
          </Carousel>
        </Categories>
      </div>
    );
  }
}

export default Homepage;

这是我的 Card 组件的外观：

import React, { useEffect, useState } from 'react';
import '../assets/styles/components/Card.scss';
import { LoadingRectangles } from './LoadingSpiners';

const Card = ({ product }) => {

  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // if (product.id) {
    //   console.log(` el product id es: ${product.id}`);
    //   setIsLoading(false);
    // }
    setIsLoading(false);
  }, [product]);

  return (
    <div className='card'>
      { isLoading ? <LoadingRectangles /> :
        (
          <div>
            <img className='card__img' src={product.photo1} alt={product.name} />
            <div className='card__details'>
              <div>
                <img className='card__details--img' src='' alt='icon' />
              </div>
              <p className='card__details--title'>
                {product.name}
              </p>
              <p className='card__details--subtitle'>
                {product.cost}
              </p>
            </div>
          </div>
        )}
    </div>
  );
};

export default Card;

这是我的旋转木马：

import React from 'react';

import '../assets/styles/components/Carousel.scss';

const Carousel = ({ children }) => (
  <section className='carousel'>
    <div className='carousel__container'>
      {children}
    </div>
  </section>
);

export default Carousel;

这是我的类别：

import React from 'react';
import '../assets/styles/components/Categories.scss';

const Categories = ({ children, title }) => (
  <div className='categories'>
    <h3 className='categories__title'>{title}</h3>
    {children}
  </div>
);

export default Categories;

Facebook React 文档展示了这个例子。我看不出这和我的代码之间的区别。在我看来是一样的...

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

标签： javascriptreactjs

javascript - 我不明白这个警告有什么问题 - 列表中的每个孩子都应该有一个唯一的“关键”道具

问题描述

解决方案

推荐阅读