[英]React: Update UI binded to Array state object
Code works, but is it the right way?代码有效,但它是正确的方式吗? All i want is to update the data I retrieved at the page load.
我想要的只是更新我在页面加载时检索到的数据。 Data is in array object.
数据在数组 object 中。
In the handleChange
function, I am replacing the index of the editing employee.在
handleChange
function中,我正在替换编辑员工的索引。 Is this the correct way of doing it?这是正确的做法吗?
const [employees, setEmployees] = useState([]);
const getEmployees = async ()=>{
const response = await api.get('/employees')
setEmployees(response.data)
}
useEffect(()=> {
getEmployees()
},[])
const handleChange =(e, id)=> {
let editing = employees.filter(e => e.id === id)[0]
const index = employees.indexOf(editing)
editing = {...editing, [e.target.name]: e.target.value }
const empCopy = [...employees]
empCopy.splice(index,1,editing)
setEmployees(empCopy)
}
return (
<div>
{
employees.length > 0 ?
(employees).map((emp)=> (
<div class="card" key={emp.id}>
<div class="card-body">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" value={emp.firstName} name="firstName" onChange={(event)=> handleChange(event, emp.id)}/>
</div>
<div class="form-group">
<label for="lastName" >Last Name</label>
<input type="text" class="form-control" value={emp.lastName} name="lastName" onChange={(event)=> handleChange(event, emp.id)} />
</div>
<div class="form-group">
<label for="addressLine">Address</label>
<input type="text" class="form-control" value={emp.addressLine} name="addressLine" onChange={(event)=> handleChange(event, emp.id)}/>
</div>
<div class="form-group">
<label for="suburb">Suburb</label>
<input type="text" class="form-control" value={emp.suburb} name="suburb" onChange={(event)=> handleChange(event, emp.id)}/>
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" class="form-control" value={emp.state} name="state" onChange={(event)=> handleChange(event, emp.id)} />
</div>
<hr></hr>
</div>
</div>
))
: "No data"
}
</div>
)
The map function callback has a second argument , index
. map function 回调有第二个参数
index
。 So to clean this up a bit you could instead do something like this:因此,要稍微清理一下,您可以改为执行以下操作:
const [employees, setEmployees] = useState([]);
const getEmployees = async () => {
const response = await api.get("/employees");
setEmployees(response.data);
};
useEffect(() => {
getEmployees();
}, []);
const handleChange = (e, index) => {
let editing = employees[index];
editing = { ...editing, [e.target.name]: e.target.value };
const empCopy = [...employees];
empCopy.splice(index, 1, editing);
setEmployees(empCopy);
};
return (
<div>
{employees.length > 0
? employees.map((emp, index) => (
<div class="card" key={emp.id}>
<div class="card-body">
<div class="form-group">
<label for="firstName">First name</label>
<input
type="text"
class="form-control"
value={emp.firstName}
name="firstName"
onChange={(event) => handleChange(event, index)}
/>
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input
type="text"
class="form-control"
value={emp.lastName}
name="lastName"
onChange={(event) => handleChange(event, index)}
/>
</div>
<div class="form-group">
<label for="addressLine">Address</label>
<input
type="text"
class="form-control"
value={emp.addressLine}
name="addressLine"
onChange={(event) => handleChange(event, index)}
/>
</div>
<div class="form-group">
<label for="suburb">Suburb</label>
<input
type="text"
class="form-control"
value={emp.suburb}
name="suburb"
onChange={(event) => handleChange(event, index)}
/>
</div>
<div class="form-group">
<label for="state">State</label>
<input
type="text"
class="form-control"
value={emp.state}
name="state"
onChange={(event) => handleChange(event, index)}
/>
</div>
<hr></hr>
</div>
</div>
))
: "No data"}
</div>
);
You can also you .map
你也可以
.map
handleChange = (e, id) => {
let updatedEmplyees = employees.map((employee) => {
if (e.id === id) return { ...employee, [e.target.name]: e.target.value }
return employee
})
setEmployees(updatedEmplyees)
}
You can do it in a more cleaner and advance syntax .您可以使用更简洁、更高级的语法来做到这一点。 Here is the handleChange method in the form of currying .
这里是currying形式的handleChange方法。
const handleChange = (index) => { return (e) => { let editing = employees[index]; editing = {...editing, [e.target.name]: e.target.value }; const empCopy = [...employees]; empCopy.splice(index, 1, editing); setEmployees(empCopy); }; };
<input type="text" class="form-control" value={emp.firstName} name="firstName" onChange={handleChange(index)} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.