Question

假定这部分代码是新添加的tp更新命令。 handleGetData（）-从api componentDidUpdate（）获取现有订单-应该在现存订单更改时触发。

，但不会触发。我进行了一些研究，发现在检查this.state.existingOrders！=== prevState.existingOrders时，可以无限次调用orders /，尽管setState（）是在有条件的情况下调用的。

我不确定发生了什么事。

class Directory extends Component {
  state = {
    existingOrders: [],
    name: ' ',
    price: ' ',
    id: ' '
  };

  handleGetData = () => {
    API.get('orders').then(response => {
      this.setState({ existingOrders: response.data }, () => {
        console.log('Getting');
      });
    });
  };

  componentDidMount() {
    this.handleGetData();
  }

  componentDidUpdate(prevProps, prevState) {
    if (JSON.stringify(prevState) !== JSON.stringify(this.state))
      this.handleGetData();
    else return false;
  }

  handleAddNewOrder = () => {
    console.log('Adding new order');
    const nameInput = this.state.name;
    const priceInput = this.state.price;

    API.post('orders/', {
      name: nameInput,
      price: priceInput
    });

    this.setState({ name: ' ' });
    this.setState({ price: 0 });
  };



  handleChangeName(value, name) {
    this.setState({
      name: value
    });
  }

  handleChangePrice(value, price) {
    this.setState({
      price: value
    });
  }

  render() {
    return (
      <React.Fragment>

          <h2> Existing Orders</h2>
          <table id="orders">
            <thead>
              <tr>
                <td> Item Number </td>
                <td> Item Name </td>
                <td> Price </td>
              </tr>
            </thead>

            <tbody>
              {this.state.existingOrders.map(order => {
                return (
                  <tr>
                    <td> {order.id} </td>
                    <td> {order.name} </td>
                    <td> {order.price} </td>
                  </tr>
                );
              })}
            </tbody>
          </table>

      </React.Fragment>
    );
  }
}

export default Directory;

Answer 1

API.post('orders', {name: nameInput, price: priceInput}).then(response => { 
  //check status code
  if(true) this.handleGetData();
});

您可以在发布成功后获取数据，无需比较状态即可获取新的列表顺序

componentDidUpdate（）不会在旅途中更新项目

1 个答案: