2016-11-02 4 views
1

データをaxiosでロードしようとしていますが、データを状態にフェッチできません。非同期アクションは配列[0]を返します

マイ減速:

import * as types from '../actions/actionTypes'; 

const initialState = { 
    fetching: false, 
    fetched: false, 
    questions: [], 
    error: null, 
} 

export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 
    case types.FETCH_QUESTIONS_SUCCESS: 
     return { 
     ...state, 
     questions: action.payload 
     }; 
    case types.FETCH_QUESTIONS_FAILURE: 
     return { 
     ...state, 
     error: action.payload 
     }; 
    default: 
     return state; 
    } 
} 

私のアクションの作成者:

import * as types from './actionTypes'; 
import axios from 'axios'; 

export function fetchQuestions(city) { 
    return function (dispatch) { 
    axios.get('http://rest.learncode.academy/api/test123/tweets') 
     .then((response) => { 
     console.log("Test:" + response.data) //This returns [Object Object] 
     dispatch({type: "FETCH_QUESTIONS_SUCCESS", payload: response.data}) 
     }) 
     .catch((err) => { 
     dispatch({type: "FETCH_QUESTIONS_FAILURE", payload: err}) 
     }) 
    } 
}; 

にconsole.log [オブジェクトオブジェクト]を私を与えるがありませんで。私はそれがquestions

const {questions, actions} = this.props; 
const openQuestionOverview = (test) => { 
    actions.fetchQuestions(); 
    console.log(questions); //Returns Array[0] for questions 
} 

return(
    <TouchableHighlight onPress={openQuestionOverview}> 
       <Image source={button} /> 
    </TouchableHighlight> 
) 
+0

'types.FETCH_QUESTIONS_SUCCESS'の値は何ですか? – QoP

答えて

1

状態では何も入れていないアクションを呼び出すときしかし、それは[Object Object]を返すだという事実は問題ではありません...それは、オブジェクトの文字列リテラル表現です。デバッグの目的で、2行にログアウトするか、文字列化されたJSONを連結することができます。

console.log('Test') 
console.log(response.data) 

// or 

console.log('Test: ' + JSON.stringify(response.data)) 

応答データがquestionsキーが含まれているが、初期状態だとAPIが非同期であるため、すぐにfetchQuestions後のログが[]を返す必要がありますと仮定。そのため、同じ呼び出しで状態を見ることができなくなります。 TextコンポーネントをJSON.stringify(questions,null,2)の値にバインドして、状態が適切に更新されるようにすることができます。

+1

ありがとう、本当に私は 'console.log()'を直後に呼び出したのでそれは本当にありました。その代わりに、コンストラクタで 'fetchQuestions()'関数を呼び出してから、ボタンを押すとconsole.log()が呼び出されました。 –

関連する問題