React中如何将Props值传递至Input组件且不报错？更新模态框数据回显问题求助

这个警告的原因很明确：你给表单输入框设置了value属性，但没有配套的onChange处理函数，React会把这个输入框视为只读状态——这和你想要编辑员工数据的需求冲突了。

你提到不想等用户输入才显示数据，而是打开模态框就直接回显，这时候不能用defaultValue（它只会在组件第一次渲染时生效，后续props更新不会同步），正确的做法是把员工数据维护在组件的内部状态里，同时实现onChange来更新状态，让输入框成为受控组件。

下面是修改后的代码，我会标注关键改动点：

import React, { useState, useEffect } from 'react';

function UpdateModal(props){
  // 1. 用useState初始化内部状态，默认值从props获取
  const [currentEmployeeData, setCurrentEmployeeData] = useState(props.employeeData || { employee_name: "", salary: "" });

  // 2. 监听props.employeeData的变化，当外部传入新数据时更新内部状态（比如每次打开模态框时）
  useEffect(() => {
    setCurrentEmployeeData(props.employeeData || { employee_name: "", salary: "" });
  }, [props.employeeData]);

  // 3. 实现通用的onChange处理函数，更新对应字段的状态
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setCurrentEmployeeData(prev => ({
      ...prev,
      [name]: name === 'employeeSalary' ? Number(value) : value // 薪资是数字类型，要转换
    }));
  };

  function updateEmployeeData(){
    // 这里可以用currentEmployeeData提交更新请求
    console.log('更新的数据:', currentEmployeeData);
    // 提交后记得关闭模态框等操作
  }

  return (
    <div className="modal fade" id={"updateModal"+ props.modalId} tabIndex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title" id="updateModalLabel">Employee Update</h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            <form className="form">
              <div className="form-group">
                <label htmlFor="employeeName">Employee Name: </label>
                {/* 4. 给input添加onChange，并且name属性要和状态字段对应 */}
                <input 
                  type="text" 
                  name="employeeName" 
                  id="employeeName" 
                  className="form-control" 
                  value={currentEmployeeData.employee_name ?? ""} 
                  onChange={handleInputChange}
                />
              </div>
              <div className="form-group">
                <label htmlFor="employeeSalary">Employee Salary:</label>
                <input 
                  type="number" 
                  name="employeeSalary" 
                  id="employeeSalary" 
                  className="form-control" 
                  value={currentEmployeeData.salary ?? ""} 
                  onChange={handleInputChange}
                />
              </div>
            </form>
          </div>
          <div className="modal-footer">
            <input type="submit" value="Update" className="btn btn-info" onClick={updateEmployeeData} />
            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  );
}
export default UpdateModal;

关键改动说明： #

• 内部状态管理：把props传入的employeeData转成组件自己的state，这样既可以在模态框打开时直接回显数据，又能通过输入实时更新状态。
• 监听props变化：用useEffect监听props.employeeData，确保每次打开模态框（外部传入新的员工数据）时，内部状态都会同步更新，避免显示旧数据。
• 通用onChange处理：写一个复用的handleInputChange函数，通过input的name属性匹配状态字段，简化代码。
• 类型转换：薪资是数字类型，在更新状态时把输入值转成Number，避免后续提交时出现字符串类型的薪资。

这样修改后，不仅能解决React的警告，还能实现打开模态框就自动回显员工数据，同时支持正常编辑输入~

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