React+Laravel CRUD编辑问题：点击编辑按钮无法传值到表单

控制台报错：Expected onClick listener to be a function, instead got a value of object type

现有代码 #

表格展示代码

<table class="table table-dark" align="center">
  <thead>
    <tr>
      <th scope="col">Employee Id</th>
      <th scope="col">Employee Name</th>
      <th scope="col">Employee Address</th>
      <th scope="col">Employee Mobile</th>
      
      <th scope="col">Option</th>
    </tr>
  </thead>
       {users.map(function fn(item)
       {
            return(
            <tbody>
                <tr>
                <th scope="row">{item.id} </th>
                <td>{item.name}</td>
                <td>{item.address}</td>
                <td>{item.mobile}</td> 
              
                <td>
                    <button type="button" class="btn btn-warning"  onClick={editEmployee(users)}>Edit</button>    
                    <button type="button" class="btn btn-dark" >Delete </button>
                </td>


                </tr>
            </tbody>
            );
            })}
            </table>
                </div>
            );
        }

表单及变量代码

function EmployeeLoad()
{
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [mobile, setMobile] = useState("");


const [users, setUsers] = useState([]);
useEffect(()=>
{
  Load();
},[])

  async function editEmployee(users)
  {
   console.log(users.name); 

  }


 
  async function  Load()
  {
     const result = await axios.get(
         "http://127.0.0.1:8000/api/employees");
         setUsers(result.data);
         console.log(result.data);
  }
 


    async function  handleClick(event)
    {
      event.preventDefault();
      
      await axios.post("http://127.0.0.1:8000/api/save",
      {
          name: name,
          address: address,
          mobile: mobile
      }
      );
      alert("Employee Registation success");
    }


  return (
    <div>
       <h1>Employee Details</h1>
       <div class="container mt-4" >
          <form>
              <div class="form-group">
                <label>employeeName</label>
                <input  type="text" class="form-control" id="employeeName"
                onChange={(event) =>
                  {
                    setName(event.target.value);      
                  }}
                />
              </div>

              <div class="form-group">
                <label>employeeAddress</label>
                <input  type="text" class="form-control" id="employeeAddress" 
                  onChange={(event) =>
                    {
                      setAddress(event.target.value);      
                    }}

                />
              </div>

              <div class="form-group">
                <label>Mobile</label>
                <input type="text" class="form-control" id="employeeMobile" 
                
                onChange={(event) =>
                  {
                    setMobile(event.target.value);      
                  }}
                
                
                
                />
              </div>

              <button   class="btn btn-primary mt-4"  onClick={handleClick}  >Register</button>
            </form>
          </div>

问题修复方案 #

1. 修正onClick绑定逻辑

当前onClick={editEmployee(users)}会在组件渲染时直接执行函数，而非点击按钮时触发，且传递的是整个用户数组而非当前行数据。修改为箭头函数包裹，传递当前行的item：

<button type="button" class="btn btn-warning" onClick={() => editEmployee(item)}>Edit</button>

2. 完善editEmployee函数，填充表单数据

原函数仅打印数据，需将选中的员工数据赋值给表单的状态变量，实现表单回显：

async function editEmployee(employee)
{
  setName(employee.name);
  setAddress(employee.address);
  setMobile(employee.mobile);
}

3. 规范HTML表格结构（可选）

循环中每个行单独创建<tbody>不符合规范，应将<tbody>放在循环外部，同时给循环元素添加key避免React警告：

<table class="table table-dark" align="center">
  <thead>
    <tr>
      <th scope="col">Employee Id</th>
      <th scope="col">Employee Name</th>
      <th scope="col">Employee Address</th>
      <th scope="col">Employee Mobile</th>
      <th scope="col">Option</th>
    </tr>
  </thead>
  <tbody>
    {users.map(function fn(item) {
      return(
        <tr key={item.id}>
          <th scope="row">{item.id} </th>
          <td>{item.name}</td>
          <td>{item.address}</td>
          <td>{item.mobile}</td> 
          <td>
            <button type="button" class="btn btn-warning" onClick={() => editEmployee(item)}>Edit</button>    
            <button type="button" class="btn btn-dark" >Delete </button>
          </td>
        </tr>
      );
    })}
  </tbody>
</table>

完成以上修改后，点击编辑按钮即可将选中行的员工数据填充到表单中。

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