Javascript 在react中计算ajax之后的值

我制作了一个滑块，它会出现bug——在第一次点击下一个幻灯片之后，它只会获取数据并计算项目。长度类似于0。第二次点击后，它就会滑下来。如何计算API请求后的项目长度（240*（items.length-4）*-1）。似乎需要承诺，但即使我找到了解决方案，如何检查数据是否已经加载，并且不再加载。请帮助我理解并找到该任务的解决方案

import React, { Component } from 'react';
import 'whatwg-fetch';

import Journal from './Journal';


export default class JournalsGroup extends Component {
  state = {
    items: [],
    left: 0,
    loaded: false
  }

  componentDidMount(){
    //if !this.props.data
     this.APIRequest(this.props.id);
   }

   slide = (dir) => {
     let { left, items, loaded } = this.state;

     if(!loaded){
      this.APIRequest(this.props.id, true);
      this.setState({loaded: true});
     }
     if(left < 0 && dir === 'left'){
       this.setState({left: left + 240});
     }
     //todo: count items only after ajax
     if (left < 240 * (items.length - 4) * -1 && dir === 'right'){
       this.setState({left: left - 240});
     }
   }

  APIRequest = (id, all) => {
    const myHeaders = new Headers();
    myHeaders.append('X-User-Agent', '');

    const myInit = { method: 'GET',
                   headers: myHeaders
                 };
   let myRequest;
    if(this.props.magazine){
      myRequest = new Request(`magazines/${id}/issues?limit=4`,
                 myInit);
    }else {
      myRequest = new Request(`catalog/category/${id}/issues?limit=${this.props.main ? 8 : 4}`,
                 myInit);
     //todo: pagination
     if(all){
       myRequest = new Request(`catalog/category/${id}/issues`,
                  myInit);
     }
    }

    if(this.props.all){
      myRequest = new Request(`catalog/category/${id}/issues`,
                 myInit);
    }

    if(!!this.props.data){
      this.setState({items: this.props.data});
      } else {
        fetch(myRequest)
          .then(response => {
            return response.json();
           })
          .then(data => {
            this.setState({items: data.data});
            if(all){
              this.setState({loaded: true});
            }
          })
          .catch( console.log );
      }
  }

  render() {

}

import React，{Component}来自'React'；
导入“whatwg fetch”；
从“./Journal”导入日记账；
导出默认类JournalsGroup扩展组件{
状态={
项目：[]，
左:0,，
加载：false
}
componentDidMount（）{
//如果！this.props.data
this.apirest（this.props.id）；
}
幻灯片=（目录）=>{
设{left，items，loaded}=this.state；
如果（！已加载）{
this.apirest（this.props.id，true）；
this.setState（{loaded:true}）；
}
if（left<0&&dir==“left”）{
this.setState（{left:left+240}）；
}
//todo:仅在ajax之后计数项目
如果（左<240*（items.length-4）*-1&&dir=='right'）{
this.setState（{left:left-240}）；
}
}
APIRESQUEST=（id，全部）=>{
const myHeaders=新的头（）；
附加（'X-User-Agent'，''）；
const myInit={method:'GET'，
标题：myHeaders
};
让我的请求；
如果（本道具杂志）{
myRequest=新请求（`Magazine/${id}/issues？limit=4`，
肌炎）；
}否则{
myRequest=新请求（`catalog/category/${id}/issues？limit=${this.props.main？8:4}`，
肌炎）；
//todo:分页
如果（全部）{
myRequest=新请求（`catalog/category/${id}/issues`，
肌炎）；
}
}
如果（这个。道具。全部）{
myRequest=新请求（`catalog/category/${id}/issues`，
肌炎）；
}
如果（！！此.props.data）{
this.setState（{items:this.props.data}）；
}否则{
获取（myRequest）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
this.setState（{items:data.data}）；
如果（全部）{
this.setState（{loaded:true}）；
}
})
.catch（console.log）；
}
}
render（）{
}

您可以将回调添加到您的

API请求中

示例：

APIRequest = (id, all, cb) => { 
    // ...
    fetch(myRequest)
          .then(response => {
            return response.json();
           })
          .then(data => {
            this.setState({items: data.data});
            if(all){
              this.setState({loaded: true});
            }
            if (cb) cb();
          })
          .catch( console.log );
}

---

更新@Kyon的评论

APIRequest = (id, all) => { 
    // ...
    return fetch(myRequest)
}

---

---

当你可以轻松地返回承诺并让上层（调用方）函数处理承诺时，为什么要回调API请求函数。否则，我们将陷入回调地狱，在承诺存在之前我们就生活在那里。谢谢你的改进。我更新了我的答案。现在看起来好点了吗？

APIRequest = (id, all) => { 
    // ...
    return fetch(myRequest)
}

this.APIRequest(this.props.id, true)
      .then(response => {
          return response.json();
      })
      .then((data) => {
          this.setState({loaded: true});
      });