存儲來自還原器的道具的數據

我有一個使得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 
})

出口默認數據的這 -

index.js同樣的功能;

我在我的js文件中使用此功能減速，說home.js如下

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

我存儲resultCame變量中的數據。在如果我做的渲染功能，

console.log(this.props.resultCame)

那麼結果來，這意味着API是越來越正常調用，但我要的結果的狀態variable.So存儲componentDidMount()調用loadData()後，我在querylist中設置狀態。

但是this.state.querylist即將變空，這意味着數據沒有設置。

如何正確設置數據？

來源

2017-10-17 Aayushi

您使用的是異步工作的axios。這意味着它在做任何事之前都會等待來自API的響應。當您使用ComponentDidMount()並調用該操作，然後立即呼叫setState時，this.state.queryset爲空的可能原因是因爲它在之前被分配了axios已從API調用接收到任何內容。收到axios的迴應後，您不得不setState，而不僅僅是運行它。

來源

2017-10-17 08:14:07

我應該怎麼做？ – Aayushi

您可以通過檢查'if（！this.state.resultCame）'來使用條件呈現。如果'this.state.resultCame'內沒有任何內容，則意味着'axios'尚未完成。你可以返回一個'加載div'直到它這樣做。當axios完成後，重新渲染將發生，現在'this.state.resultCame'有數據，您可以在'else'中返回所需的HTML。請**不要在渲染函數中使用'setState'。如果需要具有組件狀態，則可以使用其他生命週期方法（如「ComponentShouldUpdate」）來設置組件狀態。 –

我已經更新了這個問題。請檢查 – Aayushi

您應該使用ComponentWillReceiveProps（nextProps）更新狀態作爲愛可信成功呼叫的答覆會在更新後的下一個道具，你將在 類型的調度來接收他們的終極版店：GET_QUERY_LIST ，有效載荷。

來源

2017-10-18 13:40:09

存儲來自還原器的道具的數據

回答

相關問題