React JS中单个帖子点赞触发全部帖子点赞的问题排查

问题根源 #

你当前用一个全局的like布尔变量控制所有帖子的点赞状态，所有帖子的点赞图标都绑定这个单一状态。一旦调用setLike(true)，所有帖子都会切换为已点赞样式，这就是点击单个按钮却让所有帖子变已点赞的原因。

解决方案：为每个帖子维护独立的点赞状态 #

改用数组存储每个帖子的点赞状态，数组索引与帖子索引一一对应，实现单个帖子的独立控制。

1. 初始化点赞状态数组

替换原来的单一like状态：

// 根据帖子数量初始化数组，所有帖子默认未点赞
const [likedPosts, setLikedPosts] = useState(Array(urls.length).fill(false));

2. 修改点赞/取消点赞处理函数

直接通过传入的索引更新对应帖子的状态，无需多余查找逻辑：

const likeHandler = (index) => {
  setLikedPosts(prevState => {
    const newState = [...prevState];
    newState[index] = true;
    return newState;
  });
  console.log('点赞帖子索引:', index);
};

const unLikeHandler = (index) => {
  setLikedPosts(prevState => {
    const newState = [...prevState];
    newState[index] = false;
    return newState;
  });
  console.log('取消点赞帖子索引:', index);
};

3. 更新渲染逻辑

让每个帖子根据自身的点赞状态显示对应图标：

<div className={styles.imgContainer}>
  {urls.map((url, index) => (
    <Box key={index}>
      <div className={styles.postHeading}>
        <img src='https://placehold.co/70x70' alt=''/>
        <div className={styles.postUserName}>Dinesh Kumar</div>
      </div>
      <div className={styles.imgContainer} style={{backgroundImage: `url(${url})`}}></div>
      <div className={styles.actionButtons}>
        <div>
          {/* 根据当前帖子的索引获取对应点赞状态 */}
          {!likedPosts[index] ? 
            <AiOutlineHeart onClick={() => likeHandler(index)} className={`me-2`}/> :
            <AiFillHeart onClick={() => unLikeHandler(index)} className={`me-2`} />
          }
          <AiOutlineMessage className={`me-2`}/>
          <FiSend className={`me-2`}/>
        </div>
        <div>
          <FiBookmark/>
        </div>
      </div>
    </Box>
  ))}
</div>

额外说明 #

你原代码里的find和indexOf逻辑完全多余，likeHandler已经接收了帖子的index参数，直接用这个索引操作状态即可，无需重复查找。

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