React Hooks实现下拉框联动输入框并PUT更新数据求助

原代码存在的问题 #

• 下拉选项value绑定的是person.name，导致activePerson仅为字符串，无法获取用户ID用于后续更新
• updatePerson函数中，用find返回的对象直接作为数组索引是错误的，且未正确处理状态更新（原数组是GET请求获取的，应存到state中）
• 输入框value绑定错误，未与编辑状态联动
• 缺少Fetch API发送PUT请求的逻辑

修正后的完整代码 #

import { useState, useEffect } from 'react';

function PersonEditor() {
  // 用state存从接口获取的用户列表
  const [people, setPeople] = useState([]);
  // 存选中的用户对象
  const [activePerson, setActivePerson] = useState(null);
  // 存输入框的编辑值，避免直接修改activePerson
  const [editName, setEditName] = useState('');

  // 模拟GET请求获取用户列表
  useEffect(() => {
    fetch('/api/people')
      .then(res => res.json())
      .then(data => {
        setPeople(data);
      })
      .catch(err => console.error('获取用户列表失败:', err));
  }, []);

  // 下拉框选择事件：根据选中的ID找到对应的用户对象
  const handlePersonChange = (event) => {
    const selectedId = parseInt(event.target.value);
    const selectedPerson = people.find(person => person.id === selectedId);
    setActivePerson(selectedPerson);
    // 同步输入框的值为选中用户的名字
    setEditName(selectedPerson?.name || '');
  };

  // 发送PUT请求更新用户，并更新本地状态
  const handleUpdatePerson = () => {
    if (!activePerson) return;

    const updatedData = { ...activePerson, name: editName };

    fetch(`/api/people/${activePerson.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updatedData),
    })
      .then(res => {
        if (!res.ok) throw new Error('更新失败');
        return res.json();
      })
      .then(updatedPerson => {
        // 更新本地用户列表
        setPeople(prevPeople => 
          prevPeople.map(p => p.id === updatedPerson.id ? updatedPerson : p)
        );
        // 可以选择清空选中状态或保持
        setActivePerson(updatedPerson);
        alert('更新成功');
      })
      .catch(err => console.error('更新用户失败:', err));
  };

  return (
    <div>
      <select 
        name="person" 
        value={activePerson?.id || ''} 
        onChange={handlePersonChange}
      >
        <option value="">请选择用户</option>
        {people.map(person => (
          <option 
            key={person.id} 
            value={person.id}
          >
            {person.name}
          </option>
        ))}
      </select>

      {/* 选中用户后显示输入框和更新按钮 */}
      {activePerson && (
        <div style={{ marginTop: '10px' }}>
          <label htmlFor="name">修改姓名:</label>
          <input 
            type="text" 
            id="name" 
            value={editName} 
            onChange={(e) => setEditName(e.target.value)}
            style={{ marginLeft: '5px' }}
          />
          <button 
            onClick={handleUpdatePerson}
            style={{ marginLeft: '10px' }}
          >
            保存修改
          </button>
        </div>
      )}
    </div>
  );
}

export default PersonEditor;

关键修正点说明 #

• 状态管理优化：将用户列表存入useState，确保数据来源和更新都通过state控制，符合React数据流
• 下拉框值绑定：用用户ID作为option的value，选中后通过ID找到完整用户对象存入activePerson，方便后续获取ID和原始数据
• 编辑状态分离：单独用editName存输入框的值，避免直接修改activePerson，保证状态可控
• PUT请求实现：构造更新后的用户数据，发送PUT请求到对应接口，成功后更新本地用户列表，保持前后端数据一致
• 异常处理：添加请求失败的错误捕获，避免页面崩溃

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