如何在ReactJS中添加或删除新信息时再次调用状态而不需要手动刷新页面？

Question

我一直面临一个问题。我已经尝试解决它了。但是，我不知道如何让它发挥作用。我知道我的问题是在推送或删除 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>

Answer 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 是一种无状态协议。