React useState更新状态时新增组件短暂闪烁问题求解

核心问题原因 #

你遇到的组件闪烁消失问题，本质不是useState更新失效，而是两类问题导致的：

• 放在<form>标签内的按钮没有指定type属性，浏览器默认将其识别为type="submit"的提交按钮。点击时会触发表单默认提交行为，触发页面刷新，setState刚更新的状态会随着页面重载直接重置，才会出现组件闪一下就消失的现象。
• 代码写法存在不符合React设计逻辑的问题：直接把组件实例存入state、在组件渲染函数内部重复定义子组件、更新状态时没有规避闭包旧值问题，这些写法后续也会引发其他状态异常。

修复步骤 #

• 给所有非提交用途的按钮加上type="button"属性，从根源阻止表单默认提交刷新页面的行为
• 调整state存储逻辑：state只存纯数据（比如输入项的计数、每个输入项的内容值），不要直接存React组件实例，渲染时再根据数据生成对应UI
• 把可复用的子组件移到父组件外部定义，避免每次父组件重渲染都重新创建子组件函数，触发不必要的重渲染或状态异常
• 基于旧值更新状态时，使用函数式更新写法，规避闭包缓存的旧state值导致更新遗漏

修复后可直接运行的代码 #

import React, { useState } from "react";

// 子组件移到外部定义，避免重复声明
const BlogInputItem = ({ onAdd }) => {
  return (
    <div>
      <label>Topic</label>
      <input />
      <button type="button" onClick={onAdd}>Add another topic</button>
    </div>
  );
};

function AddBlogs() {
  // state只存输入项计数（纯数据），初始值为1对应第一个默认显示的输入框
  const [blogCount, setBlogCount] = useState(1);

  const addblog = () => {
    // 函数式更新保证拿到最新状态值
    setBlogCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <form>
        <div>
          <label>Topic</label>
          <input />
          {/* 按钮指定type为button，阻止默认提交 */}
          <button type="button" onClick={addblog}>Add another topic</button>
        </div>
        <div>
          {/* 根据计数渲染对应数量的新增输入项 */}
          {Array.from({ length: blogCount - 1 }).map((_, idx) => (
            <BlogInputItem key={idx} onAdd={addblog} />
          ))}
        </div>
      </form>
    </div>
  );
}
export default AddBlogs;

如果后续需要给表单加提交逻辑，只需要单独加一个type="submit"的提交按钮，在<form>的onSubmit回调里统一处理提交逻辑即可，记得在提交回调里调用e.preventDefault()阻止默认的页面跳转刷新行为。

内容的提问来源于stack exchange，提问作者Roshan Ojha