소품 업데이트 후 render() 메서드가 올바르게 호출되지 않습니다.

Question

저는 goal이라는 축소 자 및 GoalsContainer라는 컨테이너가있는 매우 간단한 react + redux 응용 프로그램을 사용하고 있습니다.

내가 로컬 DB에서 부하에 대한 작업의 목표를 초기 목표를 전화 앱 컨테이너에서

(색인화)

dispatch(loadGoals(currentDate)); 

이 목표 작업에서 loadGoals 전화 : 다음

export function loadGoals(currentDate = new Date()){ 
    return dispatch => { 
    var goals = getGoalsFromDB(normalizeDate(currentDate)); // with this I get an array from the db 
    dispatch(setLoadGoals(goals)); 
    } 
} 

function setLoadGoals(goals) { 
    return { 
    type: types.LOAD_GOALS, 
    goals 
    }; 
} 

과에 내 감속기 나는이했습니다 :

export default function goals(state = [], action) { 
    switch(action.type) { 
    case types.LOAD_GOALS: 
     return action.goals; // here I set the state of the goal reducer with the array passed via action 
    default: 
     console.log('Im here'); 
     return state; 
    } 
} 

을이 내 GoalsContainer (코멘트를 읽을 수있다) 코드 :

class GoalsContainer extends React.Component { 
    render() { 
    if (this.props.goals != undefined) { 
     console.log('ok called the render'); // in chrome console shows it 
     console.log(this.props.goals); // in chrome console shows correctly the goals loaded 
     console.log(this.props.goals.length); // it say 2 
     if (this.props.goals.length > 0) { // here fails... 
     console.log('good'); 
     console.log(this.props.goals); 
     var goalsView = <div>There are goals</div> 
     } 
     else { 
     console.log('why go here?'); // go here 
     console.log(this.props.goals); 
     var goalsView = <div>No goals</div> 
     } 
    } else { 
     var goalsView = <div>Undefined</div> 
    } 
    return (
     <div id="goals-main"> 
     {goalsView} 
     </div> 
    ); 
    } 
} 

GoalsContainer.propTypes = propTypes; 

function mapStateToProps(state) { 
    const { goals, environment } = state; 
    const { currentDate } = environment; 

    return { 
    goals, 
    currentDate 
    } 
} 

export default connect(mapStateToProps)(GoalsContainer); 

문제는이 경우 검사를 수행 할 때, 그것은 0 목표)하지만, 크롬 콘솔 쇼가있는 경우 (같은 올바르게 목표 배열 ... 그럼 내가 강제 경우 실패하다 render()에 대한 몇 가지 해결 방법은 모두 올바르게 작동합니다.

내가 잘못 했나요?

Answer 1

https://github.com/gaearon/redux-thunk을 사용했는지 여부는 언급하지 않았습니다. 감속기 리턴 기능을 사용하려면 반드시 설치해야합니다.

Answer 2

임의의 요점에서 코드의 모든 부분을 따라하기가 어렵습니다. GoalsContainer을 변경하면 어떻게됩니까?

class GoalsContainer extends React.Component { 
    render() { 
    console.log(this.props.goals); 
    return (
     <div id="goals-main"> 
     {(this.props.goals.length >= 1)?<div>There are goals</div>:<div>Nope!</div>} 
     </div> 
    ); 
    } 
} 

콘솔에 무엇이 기록됩니까?