React点击添加元素至数组异常：重复添加与元素覆盖问题

你现在的问题是每个Tour组件都维护了独立的favourites状态，点击不同按钮时，操作的是各自组件内部的数组，而非同一个共享的收藏数组。所以点击第一个按钮时，是往第一个Tour的数组里加元素；点击第二个按钮时，是往第二个Tour自己的数组里加元素，它们的数据完全独立，看起来像是“覆盖”，其实是各自更新自己的数组。

把favourites状态移到父组件Tours中，让所有Tour组件共享同一个收藏数组，通过props传递添加收藏的函数。

修改后的父组件 Tours.jsx #

import React, { useState } from "react";
import Tour from "./Tour";

const Tours = ({ tours }) => {
  // 将收藏状态提升到父组件，实现数据共享
  const [favourites, setFavourites] = useState([]);

  // 定义添加收藏的函数，接收要添加的旅游项名称
  const handleAddFavourite = (tourName) => {
    const clickedTour = { tour: tourName };
    // 使用函数式更新确保基于最新状态修改
    setFavourites(prevFavourites => [...prevFavourites, clickedTour]);
  };

  return (
    <section>
      <div className="title">
        <h2>our tours</h2>
        <div className="underline"></div>
      </div>
      {tours.map((tour) => {
        // 给每个Tour传递添加收藏的函数
        return <Tour tour={tour} key={tour.id} onAddFavourite={handleAddFavourite} />;
      })}
      {/* 可选项：添加收藏列表展示，方便验证效果 */}
      <div className="favourites-list">
        <h3>我的收藏</h3>
        <ul>
          {favourites.map((item, idx) => (
            <li key={idx}>{item.tour}</li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export default Tours;

修改后的子组件 Tour.jsx #

import React from "react";

const Tour = ({ tour, onAddFavourite }) => {
  // 移除组件内部的favourites状态，直接调用父组件传递的添加函数
  const handleFavourites = () => {
    onAddFavourite(tour.name);
  };

  return (
    <article className="single-tour">
      <img alt={tour.name} src={tour.image} />
      <footer>
        <div className="tour-info">
          <h4>{tour.name}</h4>
          <h4 className="tour-price">${tour.price}</h4>
        </div>
        <p>{tour.info}</p>
        <button onClick={handleFavourites}>Add to favourite</button>
      </footer>
    </article>
  );
};

export default Tour;

使用setFavourites(prevFavourites => [...prevFavourites, clickedTour])这种函数式更新方式，是为了避免闭包导致的状态更新异常——确保每次添加操作都是基于最新的收藏数组状态进行修改。

内容的提问来源于stack exchange，提问作者itsverde