时间戳

首页 > 解决方案 > 在地图功能 React 钩子中更新用户的输入

reactjs - 在地图功能 React 钩子中更新用户的输入

问题描述

新的反应钩子...我从 API 带来了一些用户数据，我想通过单击提交按钮来更新一个或多个输入。我可以看到用户的最后一个字母发生了变化，但我可以在屏幕上看到新的输入，我无法更改整个单词。而且我不知道它是否应该在整个用户数组中也发生变化，或者一旦我从 API 调用它们就不可能了。谢谢

import { useState } from 'react'
import axios from 'axios'
function UsersComp() {
    const [user, setUser] = useState()
    const [users, setUsers] = useState([])
    const [id, setId] = useState(0)

    const getUsers=async ()=>{
        let resp = await axios.get("https://jsonplaceholder.typicode.com/users")
        setUsers(resp.data); 
    }
    
    const update = async (e) =>
    {
        e.preventDefault();
        let resp = await axios.put("https://jsonplaceholder.typicode.com/users/" + id, user)
    }
 
    return (
    <div calssname="App">
        <form onSubmit={e => update(e)}>
            {
                users.map((item) =>
                {
                    return <tbody key={item.id}>
                                <tr><td>
                                    ID:{item.id} <br/>
                                    Name:<input value={item.name} onChange={e => setUser({...user, name : e.target.value})} type="text" name="name" /> <br/>
                                    Email:<input value={item.email} onChange={e => setUser({...user, email : e.target.value})} type="text" name="email" /> <br/>
                                <input type="button" value="Add Data"/>&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="submit" value="Update"/>
                                <input type="button" value="Delete"/><br/> 
                                </td></tr>
                    </tbody>
                })
            }
        </form>
        <input type="button" value="Get users" onClick={getUsers} /> <br/>
        
    </div>
    );
  }
  
  export default UsersComp;

标签： reactjswebreact-hooksfrontend

解决方案

您可以onChange使用以下方式进行更新map：

onChange={(e) =>
  setUser(
    users.map((eachUser) =>
      item.id === eachUser.id ? { ...eachUser, name: e.target.value } : eachUser,
    ),
  )
}

推荐阅读