React表单：映射对象无地址值时获取用户输入的实现方案

先梳理原代码里的几个基础问题：

• 输入框绑定的Address是大写，对应状态变量应该是小写的address
• handleChnage拼写错误，正确是handleChange
• useCallback未声明依赖数组，会导致回调无法获取最新状态
• 地址输入框缺少onChange事件，用户无法手动修改地址（包括地址为null的场景）

优化后的实现逻辑 #

选中姓名时自动匹配对应地址：

• 若地址不为null，直接填充到输入框，且允许用户修改
• 若地址为null，将输入框设为空，让用户手动输入
  提交表单时直接收集当前姓名和地址状态，发起POST请求

完整代码 #

import { useState, useCallback } from 'react';

function App() {
  const [address, setAddress] = useState('');
  const [name, setName] = useState('');

  const options = [
    { Name: "Tom", Address: "NewYork" },
    { Name: "Hary", Address: null },
    { Name: "Hank", Address: "florida" }
  ];

  const handleChange = (e) => {
    const selectedName = e.target.value;
    const foundObject = options.find(option => option.Name === selectedName);
    setName(selectedName);
    // 把null地址转为空字符串，保证输入框可编辑
    setAddress(foundObject.Address ?? '');
  };

  const handleFormSubmit = useCallback((event) => {
    event.preventDefault();
    const data = { name, address };
    // 替换为实际的POST请求逻辑
    console.log('提交的数据:', data);
    // 示例POST请求：
    // fetch('/your-api-url', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(data)
    // });
  }, [name, address]);

  return (
    <div id="App">
      <form onSubmit={handleFormSubmit}>
        <select value={name} onChange={handleChange}>
          <option value="">请选择姓名</option>
          {options.map((option) => (
            <option key={option.Name} value={option.Name}>
              {option.Name}
            </option>
          ))}
        </select>
        <input
          type="text"
          value={address}
          onChange={(e) => setAddress(e.target.value)}
          placeholder="请输入地址"
        />
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

export default App;

关键优化点说明 #

• 空默认选项：给select添加空选项，避免页面加载自动选中第一个姓名，符合用户主动选择的逻辑
• null地址处理：用空值合并运算符??将null转为空字符串，确保输入框处于可编辑状态
• 输入框双向绑定：给地址输入框添加onChange事件，支持用户手动输入或修改自动填充的地址
• useCallback依赖：添加[name, address]依赖数组，保证回调能获取最新的状态值

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