阿賈克斯在反應後計數

Question

我製作滑塊，並得到錯誤 - 第一次點擊下一張幻燈片，只獲取數據和計數items.length像0.然後第二次點擊幻燈片。如何計算APIRequest後的項目長度（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() { 

} 

Answer 1

可以回調添加到您的APIRequest

例子：

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

---

this.APIRequest(this.props.id, true,() => { 
    this.setState({loaded: true}); 
}); 

更新致敬@ Kyon的評論

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

---

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