【发布时间】：2021-11-02 21:03:08
【问题描述】：
我正在学习 React，我正在为员工数据制作一个 crud 应用程序。现在我遇到的问题是，当我点击 Add New button 或 Update button 时，我的组件会加载相应的功能，但我的旧组件是我的数据表我所有的员工都与新组件一起保持开放。我希望在添加新员工或更新提交时更新旧员工之前禁用或隐藏我的数据表，但我无法这样做...我制作了 AddNew.js 用于添加新员工，UpdateMember.js 用于更新老员工，然后在我的 Table.js 文件中导入这些组件，然后在 返回 >App.js 组件
更新组件在更新按钮本身的位置加载，这对我来说是另一个问题。
几乎相同的更新发生在这个更糟糕的情况下
AddNew.js
function AddNew() {
const [list, setList] = useState(null);
const [Name, setName] = useState("");
const [Department, setDepartment] = useState("");
const [Salary, setSalary] = useState("");
const Data = {
name: Name,
department: Department,
salary: Salary,
};
const PostData = () => (event) => {
let header = new Headers();
header.append("Content-Type", "application/json");
// header.append("Accept", "application/json");
//
return (
fetch(PostUrl, {
method: "POST",
headers: header,
body: JSON.stringify(Data),
})
///
.then(() => {
fetch(BaseUrl, { method: "GET", headers: header })
//
.then((response) => response.json())
.then((result) => {
console.log(result);
setList(result);
});
})
);
};
return (
<div>
<form onSubmit={PostData}>
<h2>Add New Members</h2>
<span>* All fields are required</span>
<div className="outerDiv">
<div className="innerDiv">
<input
type="text"
autoComplete="off"
name="name"
placeholder="Name"
onChange={(event) => setName(event.target.value)}
/>
</div>
<div className="innerDiv">
<input
type="text"
autoComplete="off"
name="Department"
placeholder="Department"
onChange={(event) => setDepartment(event.target.value)}
/>
</div>
<div className="innerDiv">
<input
type="text"
autoComplete="off"
name="Salary"
placeholder="Salary"
onChange={(event) => setSalary(event.target.value)}
/>
</div>
<input className="btn btn-primary" type="submit" value="Save" />
</div>
</form>
</div>
);
}
export default AddNew;
UpdateMember.js
const UpdateRow = () => (event) => {
const PutData = {
name: Name,
department: Department,
salary: Salary,
};
console.log("Update Clicked");
let header = new Headers();
header.append("Content-Type", "application/json");
header.append("Accept", "application/json");
fetch(PutUrl, {
method: "PUT",
headers: header,
body: JSON.stringify(PutData),
})
.then((response) => response.json())
.then((response) => console.log(response))
.then(() => {
fetch(BaseUrl, { method: "GET", headers: header })
.then((res) => res.json())
.then((result) => {
setList(result);
});
});
};
return (
<div>
<form onSubmit={UpdateRow}>
<span className="text">* All fields are required</span>
<hr />
<div>
<h2>Update Information</h2>
<div className="outerDiv">
<div className="innerDiv">
<input
type="text"
autoComplete="off"
name="name"
placeholder="Name"
onChange={(event) => setName(event.target.value)}
/>
</div>
<div className="innerDiv">
<input
type="text"
autoComplete="off"
name="Department"
placeholder="Department"
onChange={(event) => setDepartment(event.target.value)}
/>
</div>
<div className="innerDiv">
<input
type="text"
autoComplete="off"
name="Salary"
placeholder="Salary"
onChange={(event) => setSalary(event.target.value)}
/>
</div>
<button
style={{ float: "right" }}
className="button btn-warning"
type="submit"
>
Update
</button>
</div>
</div>
</form>
</div>
);
}
export default UpdateMember;
Table.js
function Table() {
//
const [list, setList] = useState([]);
useEffect(() => {
let mounted = true;
getList().then((items) => {
if (mounted) {
setList(items);
}
});
return () => (mounted = false);
}, []);
//
const DeleteRow = (id) => (event) => {
let header = new Headers();
header.append("Content-Type", "application/json");
header.append("Accept", "application/json");
return fetch(DeleteUrl + id, { method: "DELETE", headers: header }).then(
() => {
fetch(BaseUrl, { method: "GET", headers: header })
.then((response) => response.json())
.then((result) => {
console.log(result);
setList(result);
});
}
);
};
//
return (
<div>
<h1>Employees Data</h1>
<Router>
<Link to="/Addnew" target="_blank">
<button
style={{ float: "right" }}
className="button btn-primary LinkButton"
>
Add New
</button>
</Link>
<Route path="/AddNew">
<AddNew />
</Route>
</Router>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
<th>Actions</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{list.map((item) => (
<tr key={item.id}>
<td>
<center>{item.id}</center>
</td>
<td>
<center>{item.name}</center>
</td>
<td>
<center>{item.department}</center>
</td>
<td>
<center>{item.salary}</center>
</td>
<td>
<center>
<button
// key={item.id}
className="button btn-danger"
onClick={DeleteRow(item.id)}
>
Delete
</button>
</center>
</td>
<td>
<center>
<Router>
<Link to="/UpdateMember">
<button className="button btn-warning LinkButton">
Update
</button>
</Link>
<Switch>
<Route path="/UpdateMember">
<UpdateMember id={item.id} />
</Route>
</Switch>
</Router>
</center>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default Table;
App.js
function App() {
return (
<Table />
);
}
export default App;
【问题讨论】：
标签： javascript reactjs api react-router react-hooks