React组件跳转后表单输入值无法修改的技术求助

核心问题 #

1. 异步状态更新导致路由传参错误：handleUpdate中调用setformData后立刻执行navigate，由于React的useState是异步更新机制，此时传递给路由的formData仍是更新前的旧值，导致PersonDetails组件拿到的数据不符合预期。
2. PersonDetails组件数据未同步：组件直接绑定location.state中的formData作为输入框value，但handleForm修改的是Task组件中的状态，两者没有联动，输入框无法响应状态变化。

修复步骤 #

1. 修正Task组件的handleUpdate函数 #

跳过异步状态更新的依赖，直接将选中的updatedRow作为路由状态传递，避免异步延迟问题：

let handleUpdate = (indexNumber) => {
  let updatedRow = submitData[indexNumber];
  // 同步更新Task组件本地状态（可选，若Task组件需要同步显示）
  setformData(updatedRow);
  // 直接传递选中的行数据，不依赖未完成更新的formData
  navigate('/PersonDetails', { state: { formData: updatedRow } });
};

2. 让PersonDetails组件管理本地输入状态 #

将路由传递的formData存入组件本地状态，确保输入框变化能实时同步，同时保留和父组件的联动：

import { useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

export default function PersonDetails({
  handleForm,
  handleSubmit,
}) {
  const location = useLocation();
  const [localFormData, setLocalFormData] = useState(location.state.formData);

  // 监听路由状态变化，适配不同条目跳转场景
  useEffect(() => {
    setLocalFormData(location.state.formData);
  }, [location.state.formData]);

  // 同步更新本地状态与父组件状态
  const handleLocalChange = (e) => {
    handleForm(e);
    const { name, value } = e.target;
    setLocalFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <>
      <div className='parent-container'>
        <h1 className='h-pDetail'>PersonDetails</h1>
        <div className='content-wrapper'>
          <div className='left parent-det'>
            <form className='form-wrapper' onSubmit={handleSubmit}>
              <div className='name-wrapper'>
                <label>Name</label>
                <input
                  type='text'
                  name='uName'
                  onChange={handleLocalChange}
                  value={localFormData.uName}
                  pattern='[A-Za-z]*'
                  style={{ padding: ' 5px' }}
                />
              </div>
              {/* 静态字段直接展示，不允许修改 */}
              <div className='gender-wrapper'>
                <label>Gender</label>
                <span>{localFormData.uGender}</span>
              </div>
              <div className='medals-wrapper'>
                <label>Medals</label>
                <span>{localFormData.uMedals}</span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

3. 可选优化 #

若Task组件不需要同步展示选中的表单数据，可直接去掉handleUpdate中的setformData调用，减少不必要的状态更新。

验证效果 #

• 点击更新按钮跳转后，PersonDetails的name输入框会正确展示选中条目的名称
• 修改name输入框时，输入值实时更新，同时父组件的formData同步修改
• 性别、奖牌数字段保持静态展示，符合需求

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