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

嗨，我是新来的

reactjs

，我正在尝试用

函数构建
按钮
，通过reactjs进行一些计算。逻辑是，首先我将通过两个函数从
数据库中获取两个
列表。在这两个
函数
返回结果和
设置状态
之后，计算函数将继续并完成其工作。但不知何故，状态没有更新，它将崩溃。如何确保在计算之前更新状态？非常感谢

代码：

承诺

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

默认情况下，将'dividendList'和'divisiorList'设置为'null'。然后，当调用使用这些列表的函数时，使用if语句验证这些状态是否为false（如果它们仍然为null），然后在函数内部返回，如果不是，则不会导致任何崩溃。
默认情况下，将'dividendList'和'divisiorList'设置为'null'。然后，当调用使用这些列表的函数时，使用if语句验证这些状态是否为false（如果它们仍然为null），然后在函数内部返回，如果不是，它应该不会崩溃任何东西。
我认为这里的问题是
self.getdivident（）
和
self.getDivisor（）是异步操作。它们需要一些时间才能完成。当您点击下一行时，
const{dividendList，divisorList}=self.state，这些操作未完成，您将得到空列表

解决这一问题的一种方法是在完成GetDivident和getDivisor之后移动文档函数逻辑。您还可以并行执行这些操作，而不是按顺序执行。我使用了异步格式而不是.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（）

我认为这里的问题是
self.getdivident（）
和
self.getDivisor（）是异步操作。它们需要一些时间才能完成。当您点击下一行时，
const{dividendList，divisorList}=self.state，这些操作未完成，您将得到空列表

解决这一问题的一种方法是在完成GetDivident和getDivisor之后移动文档函数逻辑。您还可以并行执行这些操作，而不是按顺序执行。我使用了异步格式而不是.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（）

我看了你的代码，认为应该这样修改才能正确

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

您还可以使用async/await代替promise
getdivident=async（）=>{
const response=wait axios.post（服务器名称+'api/getDivisor'，{}）
让结果=response.data；
console.log（结果）
this.setState（{divisiorList:results.data}）
}
我看了你的代码，认为应该这样修改才能正确

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

您还可以使用async/await代替promise
getdivident=async（）=>{
const response=wait axios.post（服务器名称+'api/getDivisor'，{}）
让结果=response.data；
console.log（结果）
this.setState（{divisiorList:results.data}）
}
对于开始
返回axios.post（…
则可以使用
异步
/
等待
（或
。然后
）使用
Promise.all
…顺便问一下，为什么您的URL像
api//getDivisor
…为什么双重
/
哦打字错误，您的意思是在doCal函数中返回axios响应数据和setstate？如果您想等到axio.post完成，您需要在这些函数中返回它，然后您可以使用在文档中的上一条注释中，如果要开始
返回axios.post（…
，则可以使用
async
/
wait
（或
.then
）使用
Promise.all
…顺便问一下，为什么您的URL像
api//getDivisor
…为什么双重
/
哦打字错误，您的意思是在doCal函数中返回axios响应数据和setstate？如果您想等到axio.post完成，您需要在这些函数中返回它，然后您可以使用n doCalThanks中的上一条评论感谢您的回答，但我认为这种方法只能防止程序崩溃，而不能立即更新状态？是的，它可以防止应用程序在列表准备就绪之前崩溃，之后您就可以开始了。如果您发出异步请求，您不能期望立即访问它谢谢你的回答，但我认为这种方法只能防止程序崩溃，但不能立即更新状态？是的，它可以防止应用程序在列表准备好之前崩溃，之后你就可以开始了。如果你发出异步请求，你不能期望立即访问ITI，是的，我想是的。我尝试重新启动rn承诺但似乎不起作用。我对reactjs中的异步不太熟悉。我如何确保他们返回列表并执行进一步的步骤？感谢您的代码，我理解您的逻辑。但似乎不允许在异步函数中调用“this.state”？我是在打印状态“Uncaught（in promise）TypeError:无法读取未定义的属性“state”时得到的我更新了答案以使用.then（）格式。无法在commentHi中插入代码。是的，我想是的。我试图返回一个承诺，但似乎不起作用。我是reactjs中的异步新手。我如何确保他们返回列表并执行进一步的步骤？谢谢你的代码，我理解你的逻辑。但似乎不允许调用“this.state”在异步函数中？当我打印状态“未捕获（承诺中）TypeError:无法读取未定义的属性“state”时，我更新了要使用的答案。然后（）格式。无法将截取的代码放入注释中