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

【问题标题】：React: setState() hook, initial color not being set反应：setState() 钩子，未设置初始颜色
【发布时间】：2020-06-03 12:42:40
【问题描述】：

我正在尝试设置一个基本的like item，类似于facebook喜欢在页面第一次渲染时为黑色，然后使用React hooks，useState()和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(() => {
    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 <p> 元素的初始颜色为黑色，然后在“like”状态发生变化时调用 useEffect 方法来更改所述元素的颜色，但此时页面呈现时正在设置颜色，因此它没有被初始化为黑色。

可能是一个快速的解决方案，但我开始用头撞墙了：D

【问题讨论】：

因为 useEffect 总是在初始渲染时运行。在其中进行 if 检查以防止它发生。

标签： javascript reactjs

【解决方案1】：

useEffect 挂钩也将在挂载时运行。所以你需要防止钩子在第一次渲染时设置颜色。

你可以使用 useRef 钩子来做到这一点。

const mountRef = useRef(false);

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

【讨论】：

【解决方案2】：

因为您在 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;

【讨论】：