Ajax 요청 상태가 변경된 후 반응 구성 요소가 다시로드되지 않습니다.

Question

이 질문을 받고 답변했지만 사과를했지만 사과를 찾을 수 없으면 사과드립니다. 이것은 처음으로 Ajax 요청을하는 것입니다. 그래서 저는 약간 잘못된 것을하고 있다고 확신합니다. 어떤 도움이나 모범 사례라도 좋을 것 같습니다.

문제는 내 반응 페이지가로드되어 모든 구성 요소가 비어 있습니다. 워드 프로세서 :

이 방법에 setState를() (componentDidMount)를 호출,

내가 보여주는거야 예에서, 내가 componentDidMount를 호출하는 함수를 호출하고있어 동안

렌더링 추가를 트리거 나는 같은 기능을 기대한다. 그리고, 필자가 모든 로직을 componentDidMount에 넣음으로써 테스트 한 경우와 똑같은 동작을 보입니다. 그래서 잠시 빈 화면을 보거나 일시적으로 하드 코드 된 상태를 보여줄 것으로 예상되지만 아약스를 통해 상태가 수신되면 다시 렌더링됩니다. 그러나 결코 다시 렌더링되지 않습니다. 항목을 추가하거나 제거하기 위해 버튼을 눌러 페이지의 상태 변경을 수동으로 트리거하면 즉시 내 Ajax 요청의 모든 데이터가 표시됩니다.

상태가 하드 코딩되면 모든 것이 잘 작동합니다.

React Docs 및 여기에서 대부분의 사람들이 aDax 요청을 componentDidMount에 넣었 음을 알기 때문에 여기에서 시작하겠습니다. 할 수 있으면 모든 요청을 별도의 파일에 보관하려고하지만 loadEntries 함수와 getEntries 함수를 제거하고 모든 처리를 componentDidMount에 두었을 때도 동일한 문제가 발생합니다. 중요하다면 스테이크로 하드 코딩 된 것과 비슷한 20 개의 오브젝트를 가져 오는 것에 대해서만 이야기합니다.

감사합니다. 내가 멍청한 짓을했는지 알려줘!

// My higher Order Component 
import React, {Component} from 'react'; 
import Today from '../pages/Today'; 

export default class TodayContainer extends Component { 
    constructor(props) { 
    super(props); 

    this.loadEntries = this.loadEntries.bind(this); 

    this.state = {goalItems: [{entry_type: 1, date: "2017-12-20", id: 3, content: "other good stuff", completed: 1}], 
       targetItems: [{entry_type: 2, date: "2017-12-20", id: 3, content: "Fix my hat", completed: 1}], 
       successItems: [{entry_type: 3, date: "2017-12-20", id: 3, content: "Petted Cat"}], 
       quoteItem: {entry_type: 4, date: "2017-12-20", id: 1, content: "This is a quote.", author: "me"}}; 
    } 

componentDidMount() { 
    this.loadEntries(); 
} 

loadEntries() { 
    let goalArray = []; 
    let targetArray = []; 
    let successArray = []; 
    let quote = {}; 
    let scheduleArray = []; 

Network.getEntries().then((entries) => { 
    for (let entry of entries.data) { 
    switch (entry.entry_type_id) { 
     case 1: 
      goalArray.push(entry); 
      break; 
     case 2: 
      targetArray.push(entry); 
      break; 
     case 3: 
      successArray.push(entry); 
      break; 
     case 4: 
      quote = entry; 
      break; 
     case 5: 
      scheduleArray.push(entry); 
    } 
    } 
}); 

    let stateInit = { 
    goalItems: goalArray, 
    targetItems: targetArray, 
    successItems: successArray, 
    quoteItem: quote, 
    scheduleItems: scheduleArray 
    }; 

    this.setState(stateInit); 
    } 


//My Network File. 
import axios from 'axios'; 

export function getEntries(){ 
    return axios.get('http://localhost:8000/api/entry'); 
} 

Answer 1

귀하의 setState를 호출이 Network.getEntries의 약속하기 전에 실행중인이 해결됩니다. 따라서 안에 전화해야합니다.

loadEntries() { 
    let goalArray = []; 
    let targetArray = []; 
    let successArray = []; 
    let quote = {}; 
    let scheduleArray = []; 

Network.getEntries().then((entries) => { 
    for (let entry of entries.data) { 
    switch (entry.entry_type_id) { 
     case 1: 
      goalArray.push(entry); 
      break; 
     case 2: 
      targetArray.push(entry); 
      break; 
     case 3: 
      successArray.push(entry); 
      break; 
     case 4: 
      quote = entry; 
      break; 
     case 5: 
      scheduleArray.push(entry); 
    } 
    } 

    let stateInit = { 
    goalItems: goalArray, 
    targetItems: targetArray, 
    successItems: successArray, 
    quoteItem: quote, 
    scheduleItems: scheduleArray 
    }; 

    this.setState(stateInit); 
}); 
} 

Answer 2

나는 그냥 요청이 완료 후에 실행 귀하의 요청의 다음 블록 내부의 stateInit ... this.setState을 할 코드를 이동하려는 생각합니다.