Javascript React:setState（）挂钩，未设置初始颜色

我正在尝试设置一个基本的like项，类似于facebook喜欢在页面第一次呈现时为黑色，然后使用React钩子、useState和useffect在like状态改变时更改颜色。但是，我已经得到了要渲染的颜色，但它也是在加载时渲染的，因此当用户单击“喜欢”并更改“喜欢”状态时，不会从黑色变为绿色

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(() => {
    setLikeColor("green");
  }, [like]);
  useEffect(() => {
    setDislikeColor("red");
  }, [dislike]);**

  return (
    <div className="updateDiv">
      <span className="update">
        <img className="profilePic" src="https://picsum.photos/50/50" alt="" />
        <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="submit" onClick={() => updateLikes(like + 1)}>
          Like
        </button>
        <button type="submit" onClick={() => updateDislikes(dislike + 1)}>
          Dislike
        </button>
        <hr />
      </span>
    </div>
  );
}

export default Update;

因此，我希望在第一次呈现页面时like元素的初始颜色为黑色，然后在like的状态发生变化时调用useffect方法来更改所述元素的颜色，但是在页面呈现时设置了颜色，因此它没有被初始化为黑色

---

可能是一个快速解决方案，但我开始把头撞到墙上：D

useEffect挂钩也将在挂载机上运行。因此，需要防止钩子在第一次渲染时设置颜色

您可以通过使用userefhook来实现这一点

const mountRef = useRef(false);

useEffect(() => {
  if (mountRef.current) {
    setLikeColor("green");
  }
  else {
   mountRef.current = true;
  }     
}, like);

---

因为您正在useEffect挂钩下调用setLikeColor和setDislikeColor，并且最初useEffect正在运行并更改颜色。您可以执行以下操作：

从React导入React，{useState，useffect}； 功能更新{ const[like，updateLikes]=useState0； const[Loke，UpdateDisks]=useState0； const[likeColor，setLikeColor]=useStateblack； const[dislikeColor，setDislikeColor]=useStateblack； useEffect=>{ console.loguseffect； 如果like>0{ setLikeColorgreen； } }，[像]； useEffect=>{ 如果不喜欢>0{ 不喜欢卡车； } }，[不喜欢]； 回来 用户名 上午8:30 读一本好书！ 喜欢：

{like}

不喜欢：

{dislike}

updateLikeslike+1}> 喜欢 UpdateDiskRespect+1}> 不喜欢 ; }

---

导出默认更新；因为useEffect始终在初始渲染时运行。对其内部进行if检查以防止其发生。