React使用Context共享JSON数据时输入框绑定与修改异常问题求解

云上老周

2026-10-1

问题原因

状态更新逻辑错误：原setAddress写法将原本是对象类型的address状态错误修改为数组类型，导致后续取值逻辑失效，这也是用value绑定时输入框被锁定的核心原因
绑定属性使用错误：defaultValue仅在组件首次渲染时生效，后续状态变更不会触发UI更新，受控组件必须使用value绑定状态值

修改方案

1. 修正输入组件的绑定与更新逻辑

将输入框的defaultValue改为value，同时修正onChange的状态更新逻辑，使用对象展开运算符保留原有地址字段，仅更新对应修改的字段，还可以封装通用更新函数减少重复代码：

import { useContext } from 'react'
// 地址数据存储
import { AddressContext } from './SPLAddress'


const ShipAddress = () => {
  const [address, setAddress] = useContext(AddressContext);
  
  // 可复用的字段更新函数，所有字段都可以复用这个方法
  const handleFieldChange = (field) => (e) => {
    setAddress(prev => ({
      ...prev, // 保留原有所有字段
      [field]: e.target.value // 只更新当前修改的字段
    }))
  }

  return (
    <div>
      <h2>Shipping Address</h2> 

      <form className='add-form'>
        <div className='form-control'>
          <label>Line 1:</label>
          <input 
            type='text' 
            placeholder='Line1' 
            value={address.line1} 
            onChange={handleFieldChange('line1')}
          />
        </div>

        <div className='form-control'>
          <label>Line 2:</label>
          <input 
            type='text' 
            placeholder='Line2' 
            value={address.line2} 
            onChange={handleFieldChange('line2')}
          />
        </div>
        {/* 其余字段按上述逻辑统一修改即可 */}
      </form>
    </div>
  )
}
 
export default ShipAddress