如何在ReactJS中添加或删除新信息时再次调用状态而不需要手动刷新页面？
我一直面临一个问题。我已经尝试解决它了。但是，我不知道如何让它发挥作用。我知道我的问题是在推送或删除 API 后我没有重新更新列表新状态？我怎样才能解决这个问题？这样我就不用手动刷新页面了？
我有 2 个组件，但在这篇文章中，我将仅展示我用于删除并从 API 读取这篇文章的组件，该组件称为“产品”。PostForm 组件是一个单独的组件，导入到创建/删除组件中。
我在 setState 中添加了这段代码以进行删除。我想我需要一个函数来重新更新状态，但不知道如何操作。希望得到帮助 // ProductList: filter((item) => item.id !== ProductId),
class Products extends Component {
state = {
productList: [],
statusMsg: "",
};
// READ
getDataFromProductsApi() {
axios
.get("https://localhost:44366/api/Products/")
.then((res) => {
console.log(res.data);
this.setState({
productList: res.data,
});
})
.catch((error) => {
console.log(error);
this.setState({ statusMsg: "Error retreiving data" });
if (axios.isCancel(error)) return;
});
}
componentDidMount() {
this.getDataFromProductsApi();
}
// DELETE
deleteProduct = (productId, productName) => {
if (window.confirm("Are you sure? you want to delete")) {
axios
.delete(`https://localhost:44366/api/Products/${productId}`)
.then((response) => {
console.log(response);
this.setState({
statusMsg: `Product name: ${productName} With the ID: ${productId} was removed!`,
// productList: filter((item) => item.id !== productId),
});
});
}
};
showProducts = () => {
return (
<table className="customers">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Delete</th>
</tr>
青春有我1回答
-
泛舟湖上清波郎朗
你的意思是这样的吗？https://jsfiddle.net/bq8h7ns9/class Products extends React.Component { state = { productList : [], statusMsg: "", }; // READ getDataFromProductsApi() { this.setState({ productList: [{ id : 0, name: 'blah1', price: 12.3, category : 'blah' }, { id : 1, name: 'blah2', price: 32.1, category : 'blah' }], }); } componentDidMount() { this.getDataFromProductsApi(); } // DELETE deleteProduct = (productId, productName) => { if (window.confirm("Are you sure? you want to delete")) { this.setState({ statusMsg: `Product name: ${productName} With the ID: ${productId} was removed!`, productList: this.state.productList.filter((item) => item.id !== productId), }); } }; showProducts = () => { return ( <table className="customers"> <tbody> <tr> <th>ID</th> <th>Name</th> <th>Category</th> <th>Price</th> <th>Delete</th> </tr> {this.state.productList.map((product) => { return ( <tr key={product.id}> <td>{product.id}</td> <td>{product.name}</td> <td>{product.category}</td> <td>{product.price}</td> <td> <button onClick={() => this.deleteProduct(product.id, product.name)} > X </button> </td> </tr> ); })} </tbody> </table> ); }; render() { return ( <header className="App-header"> <div> <h1>Products</h1> <div> {this.state.statusMsg}</div> {this.showProducts()} {/*running function to show data view */} </div> </header> ); }}您已经在更新组件的状态；就是这样setState。您注释掉的行应该类似于this.state.productList.filter((item) => item.id !== productId),filter不是全局函数。如果您希望组件与 api 保持同步，那么您将需要使用 websockets 或长轮询之类的东西。HTTP 是一种无状态协议。
随时随地看视频慕课网APP
相关分类
JavaScript