我怎样才能等到 Reactjs 中的函数完成？

Question

嗨，我是 reactjs 的新手，我正在尝试使用 function 构建 button，并通过 Reactjs 进行一些计算。逻辑是，首先我会通过两个函数从database 中得到两个lists。在这 2 个functions 返回结果和setState 之后，计算函数将继续执行其工作。但不知何故，状态没有被更新，它会崩溃。如何确保在计算之前更新状态？非常感谢！

代码：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dividendList : [],
      divisorList : [],
};
}
  getDividend(){
    var self = this;
    axios.post(SERVER_NAME + 'api/getDividend', {})
        .then(function(response){
          let results = response.data;
          console.log(results)
          self.setState({ dividendList : results.data})
        })
        .catch(function(err){
          console.log(err)
        });
  } 
  getDivisor(){
    var self = this;
    axios.post(SERVER_NAME + 'api/getDivisor', {})
        .then(function(response){
          let results = response.data;
          console.log(results)
          self.setState({ divisorList : results.data})
        })
        .catch(function(err){
          console.log(err)
        });
  }

  doCal = () => {
    var self = this;
    self.getDividend();
    self.getDivisor();
    const { dividendList , divisorList} = self.state;
    # then will loop the list and do math
    # but since the state is not update, both lists are empty []
}

尝试过的承诺；

   getDivisor(){
    var self = this;
    return new Promise((resolve, reject) => {
      axios.post(SERVER_NAME + 'api/draw/getDivisor', {})
      .then(function(response){
        resolve(response)
      })
      .catch(function(err){
        resolve();
      });
    }) 
  } 

Answer 1

我认为这里的问题是 self.getDividend(); 和 self.getDivisor(); 是异步操作。他们将需要一些时间来完成。当您点击下一行 const { dividendList , divisorList} = self.state; 时，这些操作尚未完成，您最终会得到空列表。

解决此问题的一种方法是在 getDividend 和 getDivisor 完成后移动 doCal 函数逻辑。您也可以并行执行这些操作，而不是按顺序执行。我使用异步格式而不是 .then()。它只是一种合成糖。如果您愿意，也可以使用 .then() 实现同样的效果

async function doCalc() {
  const prom1 = axios.get('https://..dividentList');
  const prom2 = axios.get('https://..divisorList');
  const results = await Promise.all([ prom1, prom2]); // wait for both promise to complete
  // look inside results to get your data and set the state
  // continue doCal logic

}

使用 .then()

request1('/dividentList')
.then((res) => {
    //setState for divident
    return request2('/divisorList'); // this will return a promise to chain on
})
.then((res) => {
    setState for divisor
    return Promise.resolve('Success') // we send back a resolved promise to continue chaining
})
.then(() => {
    doCalc logic
})
.catch((err) => {
    console.log('something went wrong');
});

Answer 2

我查看了您的代码，并认为应该像这样更改它是正确的。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dividendList: [],
      divisorList: [],
    };
  }

  componentDidMount() {
    // the API just need be called once, so put here
    this.getDividend()
    this.getDivisor()
  }

  componentDidUpdate(_, prevState) {
    const { dividendList , divisorList } = this.state;
    // Ensure that the answer is only calculated once
    // the answer is only be calculated while the two list data are obtained
    if (
      prevState.divisorList.length === 0 &&
      prevState.dividendList.length === 0 &&
      divisorList.length > 0 &&
      dividendList.length > 0
    ) {
      doCal()
    }
  }

  getDividend(){
    var self = this;
    axios.post(SERVER_NAME + 'api/getDividend', {})
        .then(function(response){
          let results = response.data;
          console.log(results)
          self.setState({ dividendList : results.data})
        })
        .catch(function(err){
          console.log(err)
        });
  } 
  getDivisor(){
    var self = this;
    axios.post(SERVER_NAME + 'api/getDivisor', {})
        .then(function(response){
          let results = response.data;
          console.log(results)
          self.setState({ divisorList : results.data})
        })
        .catch(function(err){
          console.log(err)
        });
  }

  doCal = () => {
    const { dividendList , divisorList } = this.state;
    # then will loop the list and do math
    # but since the state is not update, both lists are empty []

    this.setState({ answer: 'xxx' })
  }

  render() {
    const { dividendList, divisorList, answer } = this.state

    if (dividendList.length === 0 && divisorList.length === 0) {
      return <div>Loading...</div>
    }

    if (!answer) {
      return <div>Error</div>
    }

    return <div>{answer}</div>
  }
}

以下只是一些使代码更易于阅读的建议，

1. 你可以使用箭头功能，这样你就不需要写self.setState({...})

getDividend = () => {
  axios.post(SERVER_NAME + 'api/getDivisor', {})
    .then((response) => {
      let results = response.data;
      console.log(results)
      this.setState({ divisorList : results.data})
    })
    .catch((err) => {
      console.log(err)
    });
}

1. 你也可以使用 async/await 代替 promise.then

getDividend = async () => {
  const response = await axios.post(SERVER_NAME + 'api/getDivisor', {})  
  let results = response.data;
  console.log(results)
  this.setState({ divisorList : results.data})
}

Answer 3

默认设置'dividendList'和'divisorList'等于'null'。然后，当调用使用这些列表的函数时，创建一个 if 语句来验证这些状态是否为 false（如果它们仍然为 null），然后在函数内部返回，如果不是，它不应该崩溃任何东西。