嗨，我正试图在react.js中实现一个编辑操作。它现在所做的是，如果我单击编辑按钮，它会在名称和电子邮件地址字段中显示行数据。如果我在没有任何更改的情况下提交它，它就会创建一个克隆。如果我提交它并进行更改，它将创建一个具有新id的全新数据。由于我是新手，所以我正在努力弄清楚。需要你们的帮助。
这是我的代码
import React from "react";
import { Dna } from "react-loader-spinner";
import { useState } from "react";
function Main() {
// *****INITIALIZING*****
const [tableData, setTableData] = useState([]);
const [formInputData, setformInputData] = useState({
id: Date.now(),
Name: "",
email: ""
});
// **********DECLARING FUNCTIONS*********
const handleChange = (evnt) => {
const newInput = (data) => ({
...data, id: Date.now(),
[evnt.target.name]: evnt.target.value
});
setformInputData(newInput);
};
const handleSubmit = (evnt) => {
evnt.preventDefault();
setloading(true);
const checkEmptyInput = !Object.values(formInputData).every((res) => res === "");
if (checkEmptyInput) {
const newData = (data) => [...data, formInputData];
setTableData(newData);
const emptyInput = { id: "", Name: "", email: "" };
setformInputData(emptyInput);
}
setTimeout(() => {
setloading(false);
}, 1000);
};
const handleDelete = (event, id) => {
event.preventDefault();
setloading(true);
const newTableData = tableData.filter(data => data.id !== id);
setTableData(newTableData)
setEditData(null);
setTimeout(() => {
setloading(false)
}, 1000)
}
const handleEdit = (event, id) => {
event.preventDefault();
console.log(id);
const editData = tableData.find((data) => data.id == id)
console.log(editData);
const editIndex = tableData.indexOf(editData);
setEditData(editIndex);
setformInputData(editData);
}
// ************RETURNING VALUES************
return (
<div className="container">
<div className="row">
<div className="col-sm-8">
<div className="col">
<input
type="text"
onChange={handleChange}
value={formInputData.Name}
name="Name"
className="form-control"
placeholder="Name"
/>
</div>
<div className="col">
<input
type="email"
onChange={handleChange}
value={formInputData.email}
name="email"
className="form-control"
placeholder="Email Address"
/>
</div>
<div className="col">
<input
type="submit"
onClick={handleSubmit}
className="btn btn-success"
/><br></br>
{loading ? (
<Dna
visible={true}
height="80"
width="80"
ariaLabel="dna-loading"
wrapperStyle={{}}
wrapperClass="dna-wrapper"
/>
) : (
<div>
{
<table className="table" id="table">
<thead>
<tr>
<th>S.N</th>
<th>Full Name</th>
<th>Email Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{tableData.map((data, index) => {
return (
<tr>
<td>{data.id}</td>
<td>{data.Name}</td>
<td>{data.email}</td>
<td>
<button
value={data.id}
onClick={(e) => handleDelete(e, data.id)}
className="btn btn-danger"
>
Delete
</button> <button
value={data.id}
onClick={(e) => handleEdit(e, data.id)}
className="btn btn-danger"
>
Edit
</button>
</td>
</tr>
);
})}
</tbody>
</table>
}
</div>
)}
</div>
</div>
</div>
</div>
);
}
export default Main;
首先，在handleEdit()中，您不应该分配ID，因为每次您在<input>中写新字母时，它都会创建新的ID。然后，您应该在handleSubmit()上创建它。
每次按下submit，都会添加一个新对象，即将数据中的值与formDataInput连接起来。
const newData = (data) => [...data, formInputData];
setTableData(newData);
您需要找到元素并对其进行修改(如果存在(。然后更新表格。
我重构了你的代码，所以现在它可以工作了。
const handleChange = (evnt) => {
const newInput = (data) => ({
...data,
[evnt.target.name]: evnt.target.value
});
setformInputData(newInput);
};
const handleSubmit = (evnt) => {
evnt.preventDefault();
setloading(true);
const checkEmptyInput = !Object.values(formInputData).every((res) => res === "");
if (checkEmptyInput) {
if (tableData.filter(e => e.id === formInputData.id).length !== 0)
setTableData([...tableData].map(e => e.id === formInputData.id ? formInputData : e));
else {
let newData = [...tableData]
newData.push({id: Date.now(), Name: formInputData.Name, email: formInputData.email})
setTableData(newData);
}
setformInputData({ id: "", Name: "", email: "" });
}
setTimeout(() => {
setloading(false);
}, 1000);
};
const handleDelete = (event, id) => {
event.preventDefault();
setloading(true);
const newTableData = tableData.filter(data => data.id !== id);
setTableData(newTableData)
setTimeout(() => {
setloading(false)
}, 1000)
}
const handleEdit = (event, id) => {
event.preventDefault();
const editData = tableData.find((data) => data.id === id)
setformInputData(editData);
}
最后，您将看到问题为Warning: Each child in a list should have a unique "key" prop。这很容易，你只需要写<tr key={index}>。我们添加索引作为关键字，因为它的值对每一行都是唯一的，即每个数组元素都有一个位置，所以如果使用索引，它将永远不会重复。
您当前没有从data中删除原始行。在您的提交处理程序中过滤掉：
const handleSubmit = (evnt) => {
// ...
if (checkEmptyInput) {
setTableData(data => data
.filter(row => row.id !== formInputData.id)
.concat(formInputData));
const emptyInput = { id: "", Name: "", email: "" };
setformInputData(emptyInput);
}
// ...
};