产品项目的简单滑块答案

【问题标题】：Simple slider for products items产品项目的简单滑块
【发布时间】：2020-03-25 18:29:05
【问题描述】：

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

    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);

【问题讨论】：

什么是意外行为？能否提供有关错误的详细信息？

标签： javascript reactjs slider

【解决方案1】：

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

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

【讨论】：

现在没有错误了。但它在数组的末尾添加了一个新元素
stackoverflow 是一个问题，您可能会得到答案：v 您要求密钥您已修复密钥
对于其他问题，请尽可能详细地编辑问题，或者您可以在此处发布另一个问题 :) 随时投票

【解决方案2】：

我认为你的问题出在这里

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

id 应该是 id+1 不是吗？

您正在添加新的 item 但 id 保持不变，这会在您的数组中创建重复的 ID，因此 key={item.id}失去了它的独特性

【讨论】：