如何使用React Hooks切换数组对象状态 点击card-button切换点赞/踩类名

现有代码问题 #

• 仅使用全局单个active状态，无法区分不同卡片的切换状态，点击任意按钮会触发所有卡片同步变化
• 类名写死为active，无法根据状态动态切换
• 状态未与单个电影条目绑定，无法实现独立管理

调整后的完整代码 #

import { useState } from 'react';

const MovieList = () => {
  const [movies, setMovies] = useState([
    {
      id: "1",
      title: "Oceans 8",
      category: "Comedy",
      likes: 4,
      dislikes: 1,
      // 新增字段：标识当前卡片点赞状态是否激活，默认true
      isLikeActive: true
    },
    {
      id: "2",
      title: "Midnight Sun",
      category: "Comedy",
      likes: 2,
      dislikes: 0,
      isLikeActive: true
    },
    {
      id: "3",
      title: "Les indestructibles 2",
      category: "Animation",
      likes: 3,
      dislikes: 1,
      isLikeActive: true
    }
  ]);

  // 删掉原来的全局active状态，修改切换方法，仅更新对应索引的电影状态
  const toggleActive = index => {
    setMovies(prevMovies => {
      return prevMovies.map((movie, i) => {
        if (i === index) {
          // 只修改点击的对应卡片的状态
          return {
            ...movie,
            isLikeActive: !movie.isLikeActive
          }
        }
        return movie;
      })
    })
  };

  // 你原有逻辑的removeItem方法实现参考
  const removeItem = index => {
    setMovies(prevMovies => prevMovies.filter((_, i) => i !== index))
  }

  return (
    <div className="container">
      {movies.map((movieDetails, index) => {
        return (
          <div className="card" key={movieDetails.id}>
            <div className="card-body">
              <button className="btn-fermer" onClick={() => removeItem(index)}>
                Close
              </button>

              <h6 className="card-id">
                ID:{movieDetails.id}
              </h6>
              <p className="card-title">
                <strong>{movieDetails.title}</strong>
              </p>
              <p className="card-category">Catégorie: {movieDetails.category}</p>
              {/* 动态绑定类名：isLikeActive为true时点赞项加active类 */}
              <p className={`card-like ${movieDetails.isLikeActive ? 'active' : ''}`}>
                Like count :{movieDetails.likes}
              </p>
              {/* 动态绑定类名：isLikeActive为false时踩项加active类 */}
              <p className={`card-dislike ${!movieDetails.isLikeActive ? 'active' : ''}`}>
                Dislike count :{movieDetails.dislikes}
              </p>
            </div>
            <button className="card-button" onClick={() => toggleActive(index)}>
              Toggle Likes and Dislikes
            </button>
          </div>
        );
      })}
    </div>
  );
}

export default MovieList;

核心改动说明 #

• 给每个电影条目新增isLikeActive标识字段，将状态和单个条目绑定，实现每个卡片状态独立
• 重写toggleActive方法，点击时仅修改对应索引的电影条目状态，不影响其他卡片
• 使用模板字符串动态绑定类名，实现点赞、踩的active类切换效果
• 修复了原有踩统计的文本错误，把重复的"Like count"改为"Dislike count"
• 把原来写在card-id上的key移到了map遍历的根节点div.card上，符合React开发规范

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