<bdo id='IIGBP'></bdo><ul id='IIGBP'></ul>
      <i id='IIGBP'><tr id='IIGBP'><dt id='IIGBP'><q id='IIGBP'><span id='IIGBP'><b id='IIGBP'><form id='IIGBP'><ins id='IIGBP'></ins><ul id='IIGBP'></ul><sub id='IIGBP'></sub></form><legend id='IIGBP'></legend><bdo id='IIGBP'><pre id='IIGBP'><center id='IIGBP'></center></pre></bdo></b><th id='IIGBP'></th></span></q></dt></tr></i><div id='IIGBP'><tfoot id='IIGBP'></tfoot><dl id='IIGBP'><fieldset id='IIGBP'></fieldset></dl></div>

      1. <tfoot id='IIGBP'></tfoot><legend id='IIGBP'><style id='IIGBP'><dir id='IIGBP'><q id='IIGBP'></q></dir></style></legend>
      2. <small id='IIGBP'></small><noframes id='IIGBP'>

        如何在 React 中执行下一个函数之前完成所有获取?

        时间:2023-10-02
          <tbody id='n2REm'></tbody>

      3. <i id='n2REm'><tr id='n2REm'><dt id='n2REm'><q id='n2REm'><span id='n2REm'><b id='n2REm'><form id='n2REm'><ins id='n2REm'></ins><ul id='n2REm'></ul><sub id='n2REm'></sub></form><legend id='n2REm'></legend><bdo id='n2REm'><pre id='n2REm'><center id='n2REm'></center></pre></bdo></b><th id='n2REm'></th></span></q></dt></tr></i><div id='n2REm'><tfoot id='n2REm'></tfoot><dl id='n2REm'><fieldset id='n2REm'></fieldset></dl></div>
          <bdo id='n2REm'></bdo><ul id='n2REm'></ul>

                <legend id='n2REm'><style id='n2REm'><dir id='n2REm'><q id='n2REm'></q></dir></style></legend>

                <small id='n2REm'></small><noframes id='n2REm'>

              • <tfoot id='n2REm'></tfoot>
                1. 本文介绍了如何在 React 中执行下一个函数之前完成所有获取?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  Using ReactJS, I have two different API points that I am trying to get and restructure: students and scores. They are both an array of objects.

                  My goal is : first, get students and scores, and second, with students and scores saved in state, I will modify them and create a new state based on students and scores state. In short, I have 3 functions: getStudents, getScores, and rearrangeStudentsAndScores. getStudents and getScores need to finish before rearrangeStudentsAndScores can run.

                  My problem is: sometimes rearrangeStudentsAndScores will run before getScores would complete. That messed rearrangeStudentsAndScores up. But sometimes it would complete. Not sure why it works 50% of the time, but I need to make it work 100% of the time.

                  This is what I have to fetch students and scores in my Client file:

                  function getStudents(cb){
                      return fetch(`api/students`, {
                          headers: {
                              'Content-Type': 'application/json',
                              'Accept': 'application/json'
                          }
                      }).then((response) => response.json())
                      .then(cb)
                  };
                  
                  function getScores(cb){
                      return fetch(`api/scores`, {
                          headers: {
                              'Content-Type': 'application/json',
                              'Accept': 'application/json'
                          }
                      }).then((response) => response.json())
                      .then(cb)
                  };
                  

                  I then combined them together:

                  function getStudentsAndScores(cbStudent, cbScores, cbStudentsScores){
                      getStudents(cbStudent).then(getScores(cbScores)).then(cbStudentsScores);
                  }
                  

                  In my react app, I have the following:

                  getStudentsAndScores(){
                      Client.getStudentsAndScores(
                          (students) => {this.setState({students})},
                          (scores) => {this.setState({scores})},
                          this.rearrangeStudentsWithScores
                      )
                  }
                  
                  rearrangeStudentsWithScores(){
                      console.log('hello rearrange!')
                      console.log('students:')
                      console.log(this.state.students);
                      console.log('scores:');
                      console.log(this.state.scores);        //this returns [] half of the time
                      if (this.state.students.length > 0){
                          const studentsScores = {};
                          const students = this.state.students;
                          const scores = this.state.scores;
                          ...
                      }
                  }
                  

                  Somehow, by the time I get to rearrangeStudentsWithScores, this.state.scores will still be [].

                  How can I ensure that this.state.students and this.state.scores are both loaded before I run rearrangeStudentsWithScores?

                  解决方案

                  Your code mixes continuation callbacks and Promises. You'll find it easier to reason about it you use one approach for async flow control. Let's use Promises, because fetch uses them.

                  // Refactor getStudents and getScores to return  Promise for their response bodies
                  function getStudents(){
                    return fetch(`api/students`, {
                      headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                      }
                    }).then((response) => response.json())
                  };
                  
                  function getScores(){
                    return fetch(`api/scores`, {
                      headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                      }
                    }).then((response) => response.json())
                  };
                  
                  // Request both students and scores in parallel and return a Promise for both values.
                  // `Promise.all` returns a new Promise that resolves when all of its arguments resolve.
                  function getStudentsAndScores(){
                    return Promise.all([getStudents(), getScores()])
                  }
                  
                  // When this Promise resolves, both values will be available.
                  getStudentsAndScores()
                    .then(([students, scores]) => {
                      // both have loaded!
                      console.log(students, scores);
                    })
                  

                  As well as being simpler, this approach is more efficient because it makes both requests at the same time; your approach waited until the students were fetched before fetching the scores.

                  See Promise.all on MDN

                  这篇关于如何在 React 中执行下一个函数之前完成所有获取?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:TypeError:无法在“窗口"上执行“获取":无效值 下一篇:我可以使用 Fetch 在客户端调用 Twitter API 吗?

                  相关文章

                  <small id='E1Ogj'></small><noframes id='E1Ogj'>

                    <bdo id='E1Ogj'></bdo><ul id='E1Ogj'></ul>

                      <tfoot id='E1Ogj'></tfoot>
                      <legend id='E1Ogj'><style id='E1Ogj'><dir id='E1Ogj'><q id='E1Ogj'></q></dir></style></legend>
                    1. <i id='E1Ogj'><tr id='E1Ogj'><dt id='E1Ogj'><q id='E1Ogj'><span id='E1Ogj'><b id='E1Ogj'><form id='E1Ogj'><ins id='E1Ogj'></ins><ul id='E1Ogj'></ul><sub id='E1Ogj'></sub></form><legend id='E1Ogj'></legend><bdo id='E1Ogj'><pre id='E1Ogj'><center id='E1Ogj'></center></pre></bdo></b><th id='E1Ogj'></th></span></q></dt></tr></i><div id='E1Ogj'><tfoot id='E1Ogj'></tfoot><dl id='E1Ogj'><fieldset id='E1Ogj'></fieldset></dl></div>