乐观渲染实现投票数展示：组件挂载时投票数不显示问题求助

核心问题点 #

1. 初始投票数无默认值：组件初始化时article仅包含title字段，没有votes，导致count初始化为undefined，首次渲染不显示投票数。
2. 状态不同步：useEffect获取到文章数据后只更新了article，未同步更新count，count始终停留在初始的undefined。
3. 直接修改React State：article.votes++/article.votes--属于直接修改State对象，违反React状态不可变性原则，会导致状态更新异常，出现点击两次才生效的问题。
4. 投票逻辑顺序错误：更新后端接口与本地状态的顺序、传参有误，导致状态更新不及时。

推荐解决方案（去掉独立count状态，直接复用article.votes） #

这种方式避免了多状态同步的问题，逻辑更简洁：

const Article = () => {
  const { article_id } = useParams();
  // 初始化时给votes设置默认值0，确保首次渲染有显示
  const [article, setArticle] = useState({ title: "Not Found", votes: 0 });
  const navigate = useNavigate();

  // 依赖添加article_id，路由参数变化时重新获取数据
  useEffect(() => {
    getArticle(article_id).then((fetchedArticle) => {
      setArticle(fetchedArticle);
    });
  }, [article_id]);

  const handleCountUp = async () => {
    const newVotes = article.votes + 1;
    try {
      // 先调用后端接口更新数据，成功后再更新本地状态
      await updateArticleVotes(article_id, newVotes);
      // 使用函数式更新，基于前一次状态生成新状态，避免闭包问题
      setArticle(prev => ({ ...prev, votes: newVotes }));
    } catch (err) {
      console.error("投票失败:", err);
      // 可在此添加错误提示，比如弹窗告知用户投票失败
    }
  };

  const handleCountDown = async () => {
    const newVotes = article.votes - 1;
    try {
      await updateArticleVotes(article_id, newVotes);
      setArticle(prev => ({ ...prev, votes: newVotes }));
    } catch (err) {
      console.error("投票失败:", err);
    }
  };

  const handleNavigate = () => {
    navigate("./#form");
  };

  return (
    <div>
      <div className="one-article-div" id="top">
        {/* 直接使用article.votes，无需额外维护count状态 */}
        <h5>Votes: {article.votes}</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;

关键修改说明 #

• 初始化article时添加votes: 0，保证首次渲染有默认投票数，不会出现空白。
• useEffect依赖加入article_id，当路由中的文章ID变化时，自动重新获取对应文章数据。
• 投票逻辑中先调用后端接口，成功后再更新本地状态，确保前后端数据一致；若接口调用失败，可添加错误处理逻辑。
• 使用函数式更新setArticle(prev => ...)，避免因闭包导致的状态更新异常。

内容的提问来源于stack exchange，提问作者Garden Darts