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

Question

我试图设置一个基本的喜欢项目，类似于facebook喜欢当页面第一次呈现时是黑色的颜色，然后使用React钩子，useState（）和use效应（）来改变喜欢状态变化时的颜色。然而，我已经得到了渲染的颜色，但是它也在加载渲染，所以当用户点击“喜欢”并改变喜欢状态时，不会从黑色变成绿色。

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;

所以，我想要类似的初始颜色

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




Answer 1

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

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;

Answer 2

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

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

const mountRef = useRef(false);

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