React useState更新状态后提交表单未触发组件re-render问题

React 触发组件重渲染的前提是检测到组件自身state、接收的props发生引用级别的变化，你遇到的问题本质是更新dummyData的写法不符合React的更新规则：

• 直接修改普通变量、或者直接修改原state的属性/数组内容，不会被React的状态监听机制捕获，所以不会触发noteBlock组件重渲染
• console能打印到更新后的值，是因为JS本身的引用类型特性，你确实修改了原数据的内容，但React不知道这个变化
• 手动修改代码触发编译热更新时，组件会全量重新执行读取当前最新的dummyData值，所以能看到新内容，这不是React正常的状态更新触发的重渲染

• 所有参与UI渲染的可变数据，必须用组件state管理，不要用组件外的普通变量、组件内普通let/const声明的变量存渲染用的数据
  • 函数组件用useState声明数据，类组件用this.state声明数据
• 更新状态时绝对不要直接修改原数据，必须传入全新的引用（新对象/新数组）触发更新检测，举个表单提交的正确写法示例：

// 函数组件正确示例
import { useState } from 'react'
import NoteBlock from './NoteBlock'

export default function NoteForm() {
  // 用state管理渲染用的dummyData
  const [dummyData, setDummyData] = useState([
    // 初始的note数据
  ])

  const handleFormSubmit = (e) => {
    e.preventDefault()
    const newNote = // 从表单拿到的新note内容
    // ❌ 错误写法：直接修改原数组，不会触发重渲染
    // dummyData.push(newNote)
    // ✅ 正确写法：传入全新数组，触发引用变化检测
    setDummyData(prevData => [...prevData, newNote])
  }

  return (
    <div>
      <form onSubmit={handleFormSubmit}>{/* 表单内容 */}</form>
      {/* 把state数据传给noteBlock组件 */}
      <NoteBlock notes={dummyData} />
    </div>
  )
}

• 如果用了Context、Redux、Zustand这类全局状态方案，检查更新逻辑是否生成了新的状态引用，不要直接在原state对象上修改属性。

在NoteBlock组件内打印接收的notes相关props，如果提交表单时props没有触发新的打印，就说明上层组件的状态更新逻辑没有正确触发重渲染，优先检查set方法的传值是不是新引用。

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