반응 구성 요소에서 객체의 항목을 선택할 수 없습니다. 내 redux 액션에서

Question

나는 위대한 작품을 가져 왔습니다. 나는 redux-thunk를 사용하여 그것을 감속기에 보냅니다. 그런 다음 분명히 구성 요소를 저장소에 연결합니다. 내 reactjs 구성 요소 내에서 json 개체를 볼 수 있습니다. 나는 (person.name.first)는 말한다처럼 그냥 이름을 얻으려고 할 때 구조가

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

라고 할 수 있습니다 "형식 오류 : 정의되지 않은의 '첫번째'속성을 읽을 수 없습니다"정의 첫째하지만. 기본적으로 세 가지 항목 인 정보는 나에게 같은 메시지를줍니다. 내 반응 요소를 살펴볼 때 문제는 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 : {} }}