如何在React输入框传入JSON并解析为对象合并到useState初始状态

云原生阿岚

2026-10-4

实现思路

先校验并解析输入的JSON字符串：由于用户输入的内容是字符串格式，需要先通过JSON.parse()转换为JS对象，转换逻辑必须加异常捕获，避免用户输入非法JSON格式导致程序崩溃。注意你给出的示例JSON不符合标准JSON规范（属性名未加双引号、key7的取值缺少闭合双引号），实际输入时要先修正格式。
合并状态更新：更新React状态时使用函数式更新写法，保证能拿到最新的旧状态值，只修改agu字段的内容，其他原有字段保留不变。

完整实现代码示例

import { useState } from 'react'

export default function App() {
  // 初始状态，注意属性之间要加逗号分隔
  const [state, setState] = useState({
    id: "1440",
    dev: "admin",
    cmd: 5,
    agu: {}
  })
  // 存储输入框的字符串内容
  const [jsonInput, setJsonInput] = useState('')

  const handleMerge = () => {
    try {
      // 解析输入的JSON字符串
      const inputObj = JSON.parse(jsonInput)
      // 函数式更新状态，合并agu字段
      setState(prevState => ({
        ...prevState,
        agu: {
          ...prevState.agu, // 保留原有agu里的内容，如果不需要可以删掉这行
          ...inputObj
        }
      }))
      alert('合并成功')
    } catch (err) {
      alert('JSON格式错误，请检查输入内容：' + err.message)
    }
  }

  return (
    <div>
      <textarea
        value={jsonInput}
        onChange={(e) => setJsonInput(e.target.value)}
        placeholder="请输入JSON内容"
        rows={10}
        cols={50}
      />
      <br />
      <button onClick={handleMerge}>合并到状态</button>
      <br />
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  )
}