React - 使用相同功能时如何分离单个孩子的操作

Question

我有一个轮播组件，希望在每张卡片上都有一个“喜欢”按钮。我怎样才能在功能组件中做到这一点？当我在“喜欢”按钮上使用“useState”时，反应会出现在每个孩子（每张卡片）上。我该如何处理这个问题？

我希望当我点击“喜欢”按钮时，每个人的新喜欢计数都会单独增加，并且只向特定的孩子（卡片）显示反应。

<>   <Card name="A" likes={0} />   <Card name="B" likes={1} clicked /> </>

// FlashDeals.jsx
import React, { useState } from "react";
import Slider from "react-slick";

export const FlashCard = ({ productItems }) => {
  const [count, setCount] = useState(0);
  const increment = (prev) => {
    setCount((prev) => (prev += 1));
  };

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
  };

  return (
    <>
      <Slider {...settings}>
        {productItems.map((item) => {
          return (
            <div className="box" key={item.id}>
              <div className="product">
                <div className="img">
                  <span className="discount">{item.discount}% Off</span>
                  <img src={item.cover} alt="" />
                  <div className="product-like">
                    <label>{count}</label>
                    <br />
                    <i className="fa-regular fa-heart" onClick={increment}></i>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </Slider>
    </>
  );
};

Answer 1

count

是一个整数。 该值应适用于哪张卡？ 您本质上是在尝试使用一个数字来计算许多事物。

这也意味着您错误地命名了组件。 它被称为“卡片”，但包含许多“卡片”，它包含一个“计数”的值，但预计有很多“计数”。 总的来说，您基本上混淆了“单一”和“复数”。

区分概念。 有一个保存卡片的父组件，并让每张卡片保持其状态。 例如，考虑这个卡片组件：

export const Card = ({ item }) => {
  const [count, setCount] = useState(0);
  const increment = (prev) => {
    setCount((prev) => (prev += 1));
  };

  return (
    <div className="box" key={item.id}>
      <div className="product">
        <div className="img">
          <span className="discount">{item.discount}% Off</span>
          <img src={item.cover} alt="" />
          <div className="product-like">
            <label>{count}</label>
            <br />
            <i className="fa-regular fa-heart" onClick={increment}></i>
          </div>
        </div>
      </div>
    </div>
  );
};

此

Card

 组件根据传递给它的 

item

 显示在“卡片”上，并在内部跟踪 

count

 被点击的次数。

然后父组件就可以直接显示卡片了：

import React, { useState } from "react";
import Slider from "react-slick";

export const FlashCard = ({ productItems }) => {
  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
  };

  return (
    <>
      <Slider {...settings}>
        {productItems.map((item) => {
          return <Card item={item} />;
        })}
      </Slider>
    </>
  );
};