React动态多地址表单状态处理优化方案咨询

直接用数组统一管理所有地址的状态，完全不用拆成三个独立状态，代码简洁还容易维护，具体实现思路如下：

1. 初始化数组状态 #

把地址状态设为包含一个默认空地址的数组，默认地址固定在索引0的位置，后续新增地址往后追加：

const [addresses, setAddresses] = useState([{ street: '', city: '' }]);

2. 通用输入变更处理函数 #

写一个可复用的变更处理函数，根据索引和字段名更新对应地址的内容，不用给每个输入框单独写handler：

const handleAddressChange = (index, field, value) => {
  const updatedAddresses = [...addresses];
  updatedAddresses[index][field] = value;
  setAddresses(updatedAddresses);
};

3. 地址添加/删除逻辑 #

• 添加地址：判断当前地址数量小于3时，往数组里新增一个空地址对象，数量达标后禁用添加按钮：

  const addAddress = () => {
    if (addresses.length < 3) {
      setAddresses([...addresses, { street: '', city: '' }]);
    }
  };
  

• 删除地址：只允许删除索引大于0的地址（非默认地址），通过过滤数组移除目标元素：

  const removeAddress = (index) => {
    if (index > 0) {
      setAddresses(addresses.filter((_, i) => i !== index));
    }
  };
  

4. 表单提交处理 #

提交时直接把addresses数组作为表单数据的一部分，和其他字段组装成需要的对象即可：

const handleSubmit = (e) => {
  e.preventDefault();
  const submitData = {
    // 这里放其他表单字段，比如用户名、手机号等
    userAddresses: addresses
  };
  // 后续执行提交逻辑，比如发API请求
  console.log('提交的数据:', submitData);
};

5. 渲染地址输入项 #

用map遍历地址数组渲染每个输入组，默认地址（索引0）不显示删除按钮，添加按钮在地址数达到3时禁用：

<form onSubmit={handleSubmit}>
  {addresses.map((addr, index) => (
    <div key={index} style={{ marginBottom: '12px' }}>
      <input
        type="text"
        placeholder="街道名称"
        value={addr.street}
        onChange={(e) => handleAddressChange(index, 'street', e.target.value)}
        style={{ marginRight: '8px' }}
      />
      <input
        type="text"
        placeholder="城市"
        value={addr.city}
        onChange={(e) => handleAddressChange(index, 'city', e.target.value)}
        style={{ marginRight: '8px' }}
      />
      {index > 0 && (
        <button type="button" onClick={() => removeAddress(index)}>删除</button>
      )}
    </div>
  ))}
  <button type="button" onClick={addAddress} disabled={addresses.length >= 3}>
    添加地址
  </button>
  <button type="submit" style={{ marginLeft: '12px' }}>提交</button>
</form>

这种方式的优势很明显：状态集中管理，逻辑复用性强，后续如果要调整最大地址数，只需要修改判断条件即可，完全不用改动其他逻辑。

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