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 });
          }
        );
      } 
  }

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

1 个答案: