감소 자의 소품에서 데이터를 저장합니다.

Question

API 호출을하는 동작에 함수가 있습니다. 작업 하는 index.js

export const GET_QUERY_LIST='GET_QUERY_LIST'; 

export const loadData=()=>{ 
    return(dispatch)=>{ 
     axios({ 
      method:'GET', 
      url:Constants.URLConst+"/Query, 
      headers:Constants.headers 
     }).then((response)=>{ 
      return dispatch({ 
       type:GET_QUERY_LIST, 
       response 
      }); 
     }).catch((e)=>{ 
      console.log(e); 
     }) 
    } 
} 

내가 감속기

function getQueryData(state=[],action){ 
    switch(action.type){ 
     case GET_QUERY_LIST: 
      return Object.assign({},state,{ 
       result_get_query:action.response 
      }) 

     default: 
       return state 

    } 
} 

const data=combineReducers({ 
    getQueryData 
}) 

수출 기본 데이터의 this-

하는 index.js처럼 기어에 사용하고있는 동일한 기능; 내 JS 파일에서이 감속기 기능을 사용하고

내가 resultCame 변수에 데이터를 저장하고

import React,{Component} from 'react'; 
import './App.css'; 
import {loadData} from './actions'; 
import {connect} from 'react-redux'; 
import Header from './Header.js'; 
// import './Home.css'; 

export class Home extends Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 
      querylist:[] 
     } 
     this.handleChange=this.handleChange.bind(this); 
    } 

    componentDidMount(){ 
     this.props.loadData(); 

    } 

    handleChange(){ 
     this.setState({ 
      querylist:this.props.resultCame 
     }) 
    } 

    render(){ 
     console.log("home.js",this.state.querylist); 
     //this.props.resultCame.resultMeta.data.ProfileData.UserId 
     if(this.props.resultCame.resultMeta){ 
     return( 
      <div> 
       <Header/> 

        <div>{this.handleChange()}</div> 

      </div>   
      ) 
     }else{ 
      return null; 
     } 
    } 

} 

const mapStateToProps=(state)=>{ 
    return{ 
     resultCame:state.getQueryData 
    } 
} 

export default connect(mapStateToProps,{ 
    loadData:loadData 
})(Home); 

을 다음과 같이 home.js을 말한다. 내가 할 경우 렌더링 기능,

console.log(this.props.resultCame) 

, 결과는 API가 제대로이라고 점점 의미 온다,하지만 난 내가의 loadData()를 호출 한 후 componentDidMount() 상태 variable.So에 결과를 저장할에서 querylist에 상태를 설정하십시오.

그러나 this.state.querylist이 비어 있습니다. 이는 데이터가 설정되지 않음을 의미합니다.

데이터를 올바르게 설정하는 방법은 무엇입니까?

Answer 1

비동기 적으로 작동하는 axios을 사용하고 있습니다. 즉, 응답을 받기 전에 API에서 응답이 도착하기를 기다립니다. ComponentDidMount()을 사용하고 작업을 호출 한 다음 즉시 setState을 호출하면 this.state.queryset의 비어있는 원인은 axios이 API 호출로부터 아무 것도받지 않고 할당되기 때문입니다. axios에서 응답을받은 후 setState을 실행해야합니다.

Answer 2

당신은 유형의 파견에 REDUX 저장소로 수신되는 바와 같이, 업데이트 된 다음 소품에 올 것이다 Axios의 성공 호출의 응답으로 상태를 업데이트 할 ComponentWillReceiveProps (nextProps)를 사용해야합니다 GET_QUERY_LIST , 페이로드.