ReactJS中如何点击卡片按钮切换isFavorite属性值？

问题说明 #

我是ReactJS新手，正在开发一个卡片项目，点击顶部FAVORITE按钮时，会显示isFavorite值为true的卡片。现在遇到的问题是：点击每张卡片上的Favorite按钮时，如何将对应卡片的isFavorite属性值在true和false之间切换？

解决方案 #

核心思路是把静态数据转为组件状态，直接修改静态数据无法触发React重新渲染，通过状态管理实现数据更新与视图同步。以下是具体修改步骤：

1. 修改App.js

• 引入useState将静态data转为组件状态
• 编写切换收藏状态的函数toggleFavorite
• 统一卡片渲染逻辑，无需拆分all和favorites分支

修改后的App.js代码：

import { useState } from "react";
import data from "./data";
import Masonry from "react-masonry-css";
import Cards from "./Cards";

export default function App() {
  const [cardsData, setCardsData] = useState(data);
  const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);

  // 切换指定卡片的收藏状态
  const toggleFavorite = (cardId) => {
    setCardsData(prevData => 
      prevData.map(card => 
        card.id === cardId 
          ? {...card, isFavorite: !card.isFavorite} 
          : card
      )
    );
  };

  // 过滤要显示的卡片
  const displayedCards = showFavoritesOnly 
    ? cardsData.filter(card => card.isFavorite) 
    : cardsData;

  return (
    <div className="App">
      <div className="button-group">
        <button 
          className={!showFavoritesOnly ? "all active" : "all"} 
          onClick={() => setShowFavoritesOnly(false)}
        >
          ALL
        </button>
        <button
          className={showFavoritesOnly ? "favorites active" : "favorites"}
          onClick={() => setShowFavoritesOnly(true)}
        >
          FAVORITES
        </button>
      </div>
      <br />
      <Masonry
        breakpointCols={3}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        {displayedCards.map((item) => (
          <Cards
            key={item.id}
            id={item.id}
            text={item.text}
            isFavorite={item.isFavorite}
            toggleFavorite={toggleFavorite}
          />
        ))}
      </Masonry>
    </div>
  );
}

2. 修改Cards.js

• 新增接收id和toggleFavorite函数的props
• 给按钮添加点击事件，触发收藏状态切换

修改后的Cards.js代码：

const Cards = ({ id, text, isFavorite, toggleFavorite }) => {
  return (
    <div className="cards">
      <p>{text}</p>
      <button onClick={() => toggleFavorite(id)}>
        {isFavorite ? "Added to Favorites!" : "Favorite"}
      </button>
    </div>
  );
};

export default Cards;

关键说明 #

• 用useState管理卡片数据，确保数据变化时React能自动重新渲染组件
• toggleFavorite函数采用不可变更新方式修改状态（返回新数组而非直接修改原数组），符合React状态更新的最佳实践
• 统一渲染逻辑，通过displayedCards变量根据筛选条件过滤数据，简化代码结构

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