React useState/useEffect问题：初始颜色未设置，点赞状态变更无颜色切换

我来帮你搞定这个点赞颜色的问题～先看看你的代码里出了什么问题：

你的useEffect钩子会在组件挂载时就执行（因为依赖项like和dislike的初始值是0，属于依赖项变化的范畴），所以页面一加载就把点赞数颜色设成了绿色，点踩数设成了红色，直接跳过了初始黑色的状态。而且点击点赞按钮时，like从0变1，useEffect只是重复设置绿色，你自然看不到从黑色到绿色的切换效果。

下面给你两种解决方案，推荐第二种，更简洁高效：

方案一：修复useEffect的触发逻辑 #

我们可以在useEffect里加个判断，只有当点赞数/点踩数大于0（也就是用户实际点击过按钮）时，才切换颜色，否则保持初始的黑色。同时把按钮的type="submit"改成type="button"（因为它们不是表单提交按钮，避免不必要的默认行为）：

import React, { useState, useEffect } from "react";
function Update() {
  const [like, updateLikes] = useState(0);
  const [dislike, updateDislikes] = useState(0);
  const [likeColor, setLikeColor] = useState("black");
  const [dislikeColor, setDislikeColor] = useState("black");

  useEffect(() => {
    // 只有当点赞数大于0时才设为绿色，否则保持黑色
    setLikeColor(like > 0 ? "green" : "black");
  }, [like]);

  useEffect(() => {
    // 只有当点踩数大于0时才设为红色，否则保持黑色
    setDislikeColor(dislike > 0 ? "red" : "black");
  }, [dislike]);

  return (
    <div className="updateDiv">
      <span className="update">
        <img className="profilePic" src="https://picsum.photos/50/50" alt="Profile" />
        <div className="name">Username</div>
        <div className="time">08:30am</div>
        <div className="text">Reading a good book!</div>
        <div className="likes">
          Likes: <p style={{ color: likeColor }}>{like}</p>
        </div>
        <div className="dislikes">
          Dislikes: <p style={{ color: dislikeColor }}>{dislike}</p>
        </div>
        <button type="button" onClick={() => updateLikes(like + 1)}>
          Like
        </button>
        <button type="button" onClick={() => updateDislikes(dislike + 1)}>
          Dislike
        </button>
        <hr />
      </span>
    </div>
  );
}
export default Update;

方案二：使用派生状态（更推荐） #

其实颜色状态完全是由点赞数和点踩数派生出来的，根本不需要单独用useState和useEffect来维护。我们可以直接在渲染时计算颜色，这样代码更简洁，也不会有初始渲染的问题：

import React, { useState } from "react";
function Update() {
  const [like, updateLikes] = useState(0);
  const [dislike, updateDislikes] = useState(0);

  // 直接根据点赞数/点踩数计算颜色
  const likeColor = like > 0 ? "green" : "black";
  const dislikeColor = dislike > 0 ? "red" : "black";

  return (
    <div className="updateDiv">
      <span className="update">
        <img className="profilePic" src="https://picsum.photos/50/50" alt="Profile" />
        <div className="name">Username</div>
        <div className="time">08:30am</div>
        <div className="text">Reading a good book!</div>
        <div className="likes">
          Likes: <p style={{ color: likeColor }}>{like}</p>
        </div>
        <div className="dislikes">
          Dislikes: <p style={{ color: dislikeColor }}>{dislike}</p>
        </div>
        <button type="button" onClick={() => updateLikes(like + 1)}>
          Like
        </button>
        <button type="button" onClick={() => updateDislikes(dislike + 1)}>
          Dislike
        </button>
        <hr />
      </span>
    </div>
  );
}
export default Update;

这个方案里，页面初始时like和dislike都是0，颜色自然是黑色；点击点赞后like变成1，颜色自动切换为绿色；再点击点赞，like继续增加，颜色保持绿色，完全符合你的需求。而且去掉了多余的状态管理，代码逻辑更清晰。

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