存储来自还原器的道具的数据

问题描述：

我有一个使得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即将变空，这意味着数据没有设置。

如何正确设置数据？

答

您使用的是异步工作的axios。这意味着它在做任何事之前都会等待来自API的响应。当您使用ComponentDidMount()并调用该操作，然后立即呼叫setState时，this.state.queryset为空的可能原因是因为它在之前被分配了axios已从API调用接收到任何内容。收到axios的回应后，您不得不setState，而不仅仅是运行它。

我应该怎么做？ – Aayushi

您可以通过检查'if（！this.state.resultCame）'来使用条件呈现。如果'this.state.resultCame'内没有任何内容，则意味着'axios'尚未完成。你可以返回一个'加载div'直到它这样做。当axios完成后，重新渲染将发生，现在'this.state.resultCame'有数据，您可以在'else'中返回所需的HTML。请**不要在渲染函数中使用'setState'。如果需要具有组件状态，则可以使用其他生命周期方法（如“ComponentShouldUpdate”）来设置组件状态。 –

我已经更新了这个问题。请检查 – Aayushi

答

您应该使用ComponentWillReceiveProps（nextProps）更新状态作为爱可信成功呼叫的答复会在更新后的下一个道具，你将在 类型的调度来接收他们的终极版店：GET_QUERY_LIST ，有效载荷。

存储来自还原器的道具的数据

相关推荐