使用 useState 和按钮更新数组中的对象

Question

我有一个要维护的用户列表，我能够从列表中删除用户并将新用户添加到列表中，但是我无法更新现有用户。

从 'react'

导入 {useState}

常量 ChildComp = ()=> { const [users,setUsers] = useState([{name:"Leanne" ,age : "40", city : "Gwenborough",}, {姓名：“Ervin”，年龄：“35”，城市：“Wisokyburgh”，}， {姓名：“Clementine”，年龄：“22”，城市：“McKenziehaven”，}])

const [user,setUser] = useState({name : "" , age : 0, city :""})
const [deletUser,setDeletUser] = useState ("")



const deletMe =() =>
{
    let array = [...users]
    let index = array.findIndex(item=>item.name===deletUser)
  
    if (index!==-1)
    {
        array.splice(index,1)
        setUsers(array)
    }
}

const Update = (e) =>
{
    
   
   let array = [...users]
    let index = array.findIndex(item=>item.name===deletUser)
  
    if (index!==-1)
    {
        array.splice(index,1)
        setUsers(array)
        setUsers([...users,user])
       
    }

    
}


return(<div>
    <h1>add user  </h1>

    Name :  <input type ="text" onChange = {e=> setUser({...user,name:e.target.value})}/><br/>
    Age :  <input type ="text" onChange = {e=> setUser({...user,age:e.target.value})}/><br/>
    City :  <input type ="text" onChange = {e=> setUser({...user,city:e.target.value})}/><br/>

    <input type = "button" value ="Add" onClick ={e=>setUsers([...users,user])}/>
    <input type ="button" value = "Update" onClick = {Update}/><br/>

    <h3>Delet user  </h3>

    <input type = "text" name = "dleteUser" onChange = {e=>setDeletUser(e.target.value)}/>
    <input type ="button" value = "DELET" onClick = {deletMe}/><br/>
    
    <table border = "1">
   {users.map((item,index) =>
   {
       return <tr key = {index}>
           <td > {item.name}  </td>
           <td > {item.age}  </td>
           <td > {item.city}  </td>
       </tr>
   })}
   </table>
   
    </div>
    )

} 导出默认 ChildComp；

Answer 1

您可以通过首先获取该用户在数组中的索引，然后更新数组中的元素，然后 return 数组来更新用户：

const update = (e) => {
    setUsers(users => {
        const index = users.findIndex(item => item.name === user.name);

        if (index === -1) { 
            return […users, user];
        }

        users[index] = user;
        return users;
    }
}

Answer 2

尽管只有在单击“删除”按钮时才会设置该变量，但您在更新函数中使用了“deletUser”。您要使用的是 user-variable ，每当您更改其中一个 input-fields.

时设置

下面是一些更新用户条目的示例代码

const Update = () => {
  setUsers(
    users.map((existingUser) => {
      return existingUser.name === user.name 
        ? user 
        : existingUser;
    })
  );
};

p.s.: 由于您的 input-strings 后缀为 space（“Leanne”），您必须在输入字段中输入“Leanne”才能更改第一个条目.

使用 useState 和按钮更新数组中的对象

Update object in array using useState and a button

react-hooks