反应：setState() 钩子，未设置初始颜色

Question

I am trying to set a basic like item, similar to facebook likes to be a color of black when the page first renders, and then using React hooks, useState() and useEffect() to change the color when the state of likes changes. However, I have got the color to render, but it is also rendering on load so not changing from black to green when a user clicks "like" and changes the like state.

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;

So, I want the initial color of the like <p> element to be black when the page is first rendered, and then the useEffect methods to be called to change the color of said element when the state of "like" changes, but at the moment the color is being set when the page renders, so it isn't being initialised as black.

Probably a quick fix, but I'm starting to bang my head against the wall :D

Answer 1

The useEffect hook will also run on mount. So you need to prevent the hook from setting the color on the first render.

You can do this by using useRef hook.

const mountRef = useRef(false);

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

Answer 2

Because Your are calling setLikeColor and setDislikeColor under useEffect hook and initially useEffect is running and change the color.You can do like below :

 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(() => { console.log("useEffect"); if (like > 0) { setLikeColor("green"); } }, [like]); useEffect(() => { if (dislike > 0) { 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;