反応コンポーネント内のオブジェクト内のアイテムを選択できません

Question

私の還元アクションで私は素晴らしい作品を持っています。私はredux-thunkを使ってそれを私の減速機に送ります。私は明らかに私のコンポーネントを店に接続します。私のreactjsコンポーネントの中で私はjsonオブジェクトを見ることができます。私は（person.name.first）のように、単に最初の名前を取得しようとすると、構造が

object:{ 
    person: { 
     name: { 
      first: "first", 
      last: "last" 
    } 
    } 
} 

であると言うことができますそれは「例外TypeError：プロパティを読み取ることができません。 『最初の』未定義の」と言うが、最初が定義されています。基本的に3つの項目の深い情報は私に同じメッセージを与えます。 反応コンポーネントを見ると、問題はconsole.log（）内にあります。この問題はコンポーネント内のどこでも発生しており、console.log（）内だけでなく、オブジェクトの同じ場所にアクセスしようとしています。

私のアクション：

import { WEEKWEATHER, 
    TODAYWEATHER, 
    SEARCH, 
    LOCATIONERROR 
} from './types'; 

//autolocate on page load 
export const autoLocate = (location) => { 
const url = 
'http://api.wunderground.com/api/cc9e7fcca25e2ded/geolookup/q/' + 
location + '.json' 

return (dispatch) => { 

      fetch(url) 
      .then((response) => response.json()) 
      .then(response => forcast(dispatch, response)) 
      .catch((error) => { dispatch({ type:LOCATIONERROR }) }) 
}; 
}; 

//locate with search bar 
export const Locate = (location) => { 
const url = 
'http://api.wunderground.com/api/cc9e7fcca25e2ded/geolookup/q/' + 
location + '.json' 

return (dispatch) => { 
dispatch({type: SEARCH, 
      payload: location 
      }); 


      fetch(url) 
      .then((response) => response.json()) 
      .then(response => forcast(dispatch, response)) 
      .catch((error) => { dispatch({ type:LOCATIONERROR }) }) 

}; 
}; 


//gathering forcast data from either auto or typed info 
const forcast = (dispatch, response) => { 
const location = response.location.zip 
const tenDayUrl = 
'http://api.wunderground.com/api/cc9e7fcca25e2ded/forecast10day/q/' 
+ location + '.json' 
    const todayUrl = 
'http://api.wunderground.com/api/cc9e7fcca25e2ded/hourly/q/' + 
location + '.json' 

fetch(todayUrl) 
    .then((response) => response.json()) 
    .then(response => dispatch({ 
           type: TODAYWEATHER, 
           payload: response.hourly_forecast[0] 
          })) 
    .catch((error) => { dispatch({ type:LOCATIONERROR }) }) 


    fetch(tenDayUrl) 
    .then((response) => response.json()) 
    .then(response => dispatch({ 
           type: WEEKWEATHER, 
           payload: 
response.forecast.simpleforecast.forecastday[0] 
           })) 
    .catch((error) => { dispatch({ type:LOCATIONERROR }) }) 


}; 

私の減速：

import { TODAYWEATHER, WEEKWEATHER, LOCATIONERROR, SEARCH } from 
'../Actions/types'; 

const INITIAL_STATE = { 
    week:[], 
}; 
export default (state = INITIAL_STATE, action) => { 
    switch (action.type){ 
     case WEEKWEATHER: 
     return{ ...state, week:action.payload, loading:false } 
       return state; 
     } 

    }; 

はcomponenetを反応させるマイ：

import React, { Component }  from 'react'; 
import { connect }    from 'react-redux'; 
import { Locate, autoLocate } from '../Actions'; 
import {Card} from './Common' 

class Weather extends Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 

     }; 
    } 
    render() { 
     const Loading = <Card>Loading...</Card> 

     const Weather = <div style={styles.PositionColumn}> 
          <div>tuesday</div> 
           <Card> 
            <div style={styles.flexColumn}> 
             <div style={styles.flexRow}> 
              <div>jklsjdfkls</div> 
              <div>2jlsfjle</div> 
             </div> 
             <div style={styles.flexRow}> 
              <div>11</div> 
              <div>22</div> 
             </div> 
            </div> 
           </Card> 
          </div> 

     const displayWeather = (this.props.loading === true)? Loading 
: Weather; 

     console.log(this.props.week.date.day) 

     return(
      <div> 
       <img style={styles.Background} src= 
{this.state.background} alt=''/> 


        {displayWeather} 

      </div> 
     ); 
    } 
} 


const mapStateToProps = state => { 
    const week = state.locate.week; 


     return{ week }; 
} 


export default connect(mapStateToProps, {Locate, autoLocate})(Weather) 

Answer 1

部品が実装反応して、Reduxのは、常に最初defaultStateを送信します。フェッチがcomponentWillMountにあるかどうかは関係ありません。その派遣は十分に速くはありません。レデューサーファイルの初期状態を修正して、実際のデータと同じテンプレートにする必要があります。

const INITIAL_STATE = { 
    person: { 
    name: { 
     first: "", 
     last: "" 
    } 
    } 
}; 

Answer 2

デフォルト状態をレデューサーで初期化する必要があります。

const INITIAL_STATE= {person : { name : {} }}