如果数据已经存在，则响应跳过API请求

Question

我有一种情况，我在ComponentDidMount方法中进行API调用。

我在构造函数中声明了一个变量。

API调用成功后，我会将数据存储在构造函数中声明的var中。

问题：如果构造函数变量中已经有数据，我无法阻止进行api调用。

constructor(props){
    super(props);
    this.empData = [];
  }
  componentDidMount() {

      if(this.empData.length > 0){
        this.setState({employeeData: this.empData});
      } else {
        getEmpData(param1, options).then(
          employeeData => {
            this.setState({ employeeData });
            this.empData = employeeData;
          }
        );
      } 
  }

我怎样才能做到这一点？

Answer 1

那是因为您错误地设置了状态。

在构造函数中

this.empData = []; 应该

this.state = { employeeData: []}

当您在setState内部承诺时，应该足以设置状态。无需this.empData显式调用。

然后

componentDidMount() {

      if(!this.state.employeeData.length){
        getEmpData(param1, options).then(
          employeeData => {
            this.setState({ employeeData });
          }
        );
      } 
  }