乐观渲染显示投票

Question

目前，票数 {count} 没有显示在 mount 上。我使用 useEffect 获取文章，并使用 useState 将计数设置为article.votes。单击按钮两次后，投票数会上升，因为第一个渲染不显示投票数。

const Article = () => {
  const { article_id } = useParams();
  const [article, setArticle] = useState({ title: "Not Found" });
  useEffect(() => {
    getArticle(article_id).then((article) => {
      setArticle(article);
    });
  }, []);

  const [count, setCount] = useState(article.votes);
  function handleCountUp() {
    updateArticleVotes(article_id, count, article.votes);
    setCount(article.votes++);
  }
  function handleCountDown() {
    setCount(article.votes--);
    updateArticleVotes(article_id, count, article.votes);
  }
  const navigate = useNavigate();
  function handleNavigate() {
    navigate("./#form");
  }

  return (
    <div>
        <div className="one-article-div" id="top">
          <h5>Votes: {count}</h5>
          <button
            onClick={handleCountUp}
            name="Vote Up"
            className="input-submit margin-left-right"
          >
            Vote Up
          </button>
          <button
            onClick={handleCountDown}
            name="Vote Down"
            className="input-submit margin-left-right"
          >
            Vote Down
          </button>

        </div>
    </div>
  );
};

export default Article;

我期待

票：{count}

出现在坐骑上。目前只有点击赞成票或反对票后才会显示。

Answer 1

目前，票数 {count} 没有显示在 mount 上

它不会出现，因为这里：

  const [count, setCount] = useState(article.votes);

您已使用

count

初始化了

article.votes

。 即使您之后将

article.votes

更改为其他内容，

count

也不会重新初始化。

如果你想保持

count

的状态，你也必须在

article

中获得新的

useEffect

后更新它。