React中更新JSON数据后如何重新渲染输出更新内容

现有代码存在的核心问题 #

• React Hooks位置违规：所有useState钩子写在了Cards组件函数外部，违反Hooks必须在组件顶层、组件内部调用的规则，会直接触发React运行报错。
• 状态初始化逻辑偏差：用来展示的JSON状态没有以导入的静态PostData作为初始值，反而引用了不存在的JsonMessages变量，会直接触发未定义变量的报错。
• 状态更新逻辑错误：点击按钮时没有把新生成的条目追加到原JSON数组中，反而把状态值从数组替换为{ newJson: 新对象 }格式的普通对象，既丢失了原有3条静态数据，也会导致后续调用.map渲染时报错。
• 渲染数据源完全脱钩：卡片渲染时遍历的是直接导入的静态PostData常量，根本没有使用维护的jsonDataDisplayed状态，自然状态更新后界面不会触发重渲染。
• 按钮事件绑定错误：自定义Button组件的点击触发用了onChange，正确的点击事件绑定应该是onClick，否则点击按钮根本不会执行数据更新逻辑。
• 控制台打印是异步闭包导致的假象：setState是异步执行的，在调用完更新方法后立刻打印状态值，拿到的还是上一次渲染周期的旧值，并不是更新后的真实状态，这也是误以为更新逻辑正常的原因。

修正后的完整可运行代码 #

import React, { useState } from 'react'
import CardItem from '../pages/CardItem'
import PostData from '../../data/post.json'
import './Box.css';

function Cards() {
  // 所有Hooks移到组件内部顶层
  const [value_Text, setValue_Text] = useState('')
  // 用静态导入的JSON作为状态初始值，后续渲染完全基于这份维护的状态
  const [jsonDataDisplayed, setJsonDataDisplayed] = useState(PostData)

  const sendMessage = () => {
    if (!value_Text.trim()) return // 拦截空输入
    const newItem = {
      id: jsonDataDisplayed.length + 1,
      title: value_Text
    }
    // 返回全新的数组引用，触发React状态检测和重渲染
    setJsonDataDisplayed(prevData => [...prevData, newItem])
    // 输入完成后清空输入框
    setValue_Text('')
  }

  return (
    <div className='cards'>
      <div className='cards__container'>
        <div className='cards__wrapper'>
          <ul className='cards__items'>
            {/* 遍历维护的状态数据，而不是直接遍历静态导入的常量 */}
            {jsonDataDisplayed.map((postDetail) => {
              return (
                <div key={postDetail.id}>
                  <CardItem
                    src={postDetail.src}
                    text={postDetail.title}
                  />
                </div>
              )
            })}
          </ul>
        </div>
      </div>
      <input 
        type="text"  
        value={value_Text}
        onChange={event => setValue_Text(event.target.value)} 
      />
      {/* 绑定正确的点击事件触发更新 */}
      <Button type="button" onClick={sendMessage} />
    </div>
  );
}

export default Cards

核心逻辑说明 #

• React的重渲染触发规则是：只有组件内部维护的状态发生不可变的更新（即返回全新的引用值，而不是修改原有值），组件才会重新执行渲染逻辑，把最新的状态映射到DOM上。如果渲染数据源直接绑定的是静态导入的文件常量，哪怕后续有状态更新，常量本身的引用和内容都没有变化，界面自然不会刷新。
• 之前出现“第一次点击显示原有3条数据，第二次点击只显示新增条目”的问题，本质是因为状态被替换成了非数组对象，原有的静态数据被从状态中覆盖丢失，渲染时遍历到的实际是错误格式的状态值。

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