javascript - 产品项目的简单 slider

Question

我想为商品中的图片制作一个 slider ，但它不起作用。我该如何修复它？我有那个错误警告:遇到两个 child 拥有相同的 key 1。 key 应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项重复和/或省略 - 该行为不受支持，并且可能在未来版本中更改。

    in div (at src/index.js:63)
    in div (at src/index.js:62)
    in div (at src/index.js:61)
    in App (at src/index.js:82)

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "Product 1",
          price: 50,
          q: 0,
          category: "Sporting Goods",
          imgs: [
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property04.jpg",
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property02.jpg",
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property01.jpg",
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property03.jpg"
          ],
          currSlide: 0
        },
        {
          id: 2,
          name: "Product 2",
          price: 70,
          q: 0,
          category: "Sporting Goods",
          imgs: [
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property04.jpg",
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property02.jpg",
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property01.jpg",
            "https://ihatetomatoes.net/demos/_rw/01-real-estate/tn_property03.jpg"
          ],
          currSlide: 0
        }
      ],
      products: []
    };
  }

  componentDidMount() {
    this.setState({
      products: [...this.state.data]
    });
  }
  nextProperty = item => {
    const { id, name, price, q, category, imgs, currSlide } = item;

    this.setState({
      products: [
        ...this.state.products,
        { id, name, price, q, category, imgs, currSlide: currSlide + 1 }
      ]
    });
  };

  render() {
    return (
      <div className="App">
        <div className="page">
          <div className="collection">
            {this.state.products.map(item => (
              <div key={item.id} className="product">
                <div className="product__image">
                  <img src={item.imgs[item.currSlide]} alt="#" />
                  <button onClick={() => this.nextProperty(item)}>Next</button>
                </div>
                <div className="product__name">{item.name}</div>
                <div className="product__price">{item.price}$</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

你的关键问题发生是因为在你的数组中你可能有2个具有相同id的对象，你的id应该是唯一的或者你应该使用这个:

{this.state.products.map((item,i) => {
   <div key={i} className="product">
})