使用鈎子更新反應組件中的 object 值

Question

基本上提示是這樣的。 您將獲得一份用戶列表和他們的薪水。 當您單擊薪水時，應出現一個輸入字段，以便您可以更新用戶薪水。 輸入字段不應與硬編碼工資同時顯示。 基本上我需要的所有功能都存在，除了輸入字段實際上並沒有更新薪水。 額外的積分是當我點擊薪水時，只會顯示該薪水的輸入字段，但這不是我目前正在嘗試解決的問題。 我可以根據 console.logs 看到行 user.salary = SalaryInput 基本上是代碼停止工作的地方，所以任何幫助都會很棒。

import { useState, } from 'react';

const users = [
  { name: "John Doe", id: 1, salary: 111111 },
  { name: "Jane Doe", id: 2, salary: 2222222 },
  { name: "Billy Doe", id: 3, salary: 3333333 }
];

const Salary = () => {
  
  const [displayUser, setDisplayUser] = useState(users);
  console.log('displayUser:', displayUser)
  const [salaryInput, setSalaryInput] = useState(); // [value, setvalue
  const [edit, setEdit] = useState(false)

  const onSalaryChange = (event) => {
    const salaryFieldString = event.target.value;
    setSalaryInput(salaryFieldString); 
    //console.log(salaryInput)
  }

  const onClickHandler = (event) => {
    const { id } = event.target;
    const updatedUser =  users.map((user) => {
      //console.log('id:', id)
      //console.log('user.id:', user.id)
      if (user.id === id) 
        user.salary = salaryInput;
        //console.log('salaryInput:', salaryInput)
        //console.log('user.salary:', user.salary)
        //console.log('user:', user)
        return user;
    })
    console.log('updateduser:', updatedUser)
    setDisplayUser(updatedUser)
    setEdit(false);
  }

  return (
    <div>
      {displayUser.map((user) => {
        return (<div key={user.id}>
                <div>{user.name}</div>
                <div onClick={() => {setEdit(true)}}>
                {!edit && <div>{user.salary}</div>}
                {edit && <input type='number' onChange={onSalaryChange}></input>}
              </div>
            <button onClick={onClickHandler} id={user.id}>update Salary</button>
          </div>
        )}
      )}
    </div>
  )
}

export default Salary

Answer 1

嘗試返回

{...user, salary: salaryInput}