反応中常にnullをプロップ

Question

私はオブジェクトの詳細を表示する必要があるコンポーネントがあります。これは、行のクリック時にTableComponentからインスタンス化されます。 オブジェクトIDが渡され：

<ObjectDetails objectID = {id}/> 

これは私ObjectDetails成分である：

class ObjectDetails extends Component { 

componentWillMount() { 
    this.props.dispatch(loadObjectDetails(this.props.objectID)); 
} 

render() { 
    console.log("props------" + JSON.stringify(this.props)); 
    .... 
} 

let select = (state) => ({objectDetails: state.objectDetails}); 

export default connect(select)(ObjectDetails); 

} 

loadObjectDetailsがobjectDetailsとストアを移入。私は店が細部を持っていることがわかります。 しかし、render()では、propsは常にobjectDetailsをnullにしています。

私が間違っていることがわかりません、何か助けてください？

編集： 追加するいくつかの詳細は、お使いのmapStateToProps内部

export function loadObjectDetails(objectID) { 
return function (dispatch) { 
Rest.get('/rest/objects/' + objectID).end(
    (err, res) => { 
    if(err) { 
     dispatch({ type: 'FETCH_OBJECT_DETAILS_FAILURE', error: res.body}) 
    } else { 
     dispatch({ type: 'FETCH_OBJECT_DETAILS_SUCCESS', objectDetails: res.body}) 
      } 
    } 
    ) 
    } 
} 

export default function objectDetailsReducer(state={ 
    objectDetails: null, 
    error: null, 
}, action) { 

switch (action.type) { 
case "FETCH_OBJECT_DETAILS_SUCCESS": { 
    return {...state, objectDetails: action.objectDetails, error: null} 
} 
case "FETCH_OBJECT_DETAILS_FAILURE": { 
    return {...state, error: action.error } 
} 
} 
return state 
} 

const middleware = applyMiddleware(promise(), thunk, logger()) 

export default compose(middleware)(createStore)(combineReducers({ reducer1, reducer2, objectDetailsReducer})) 

Answer 1

オブジェクト機能が小道具として渡されるものです：

{objectDetails: state.objectDetails} 

は、だからあなたのコンポーネントでは、あなたがアクセスすることができます： this.props.objectDetails。そしてそれにはどんな性質があるのか​​。単にobjectIDを渡したい場合は、mapStateToProps関数を更新して変更してください。

Answer 2

したい場合はコンポーネントストアが突然変異は、あなたがドキュメントに多くのサンプルを見ることができるmapStateToPropsを使用する必要があるときに新しい小道具を取得：http://redux.js.org/docs/basics/UsageWithReact.html

をあなたのサンプルコードでは、あなたが=記号の周りの余分なスペースがあります。

<ObjectDetails objectID = {id}/>を。

componentWillMountコンポーネントがマウントされたときにこの機能がディスパッチされるので、このアクションをディスパッチしてストアを更新しますが、mapStateToPropsがないため、このコンポーネントはアップデートを保存することができません。

コンポーネントはmapStateToPropsで保存するか、このコンポーネントをプレゼンテーションのままにしておきますが、上位コンポーネントにはmapStateToPropsが必要です。

あなたは、同じページ上のプレゼンテーションコンポーネントについて読むことができます。http://redux.js.org/docs/basics/UsageWithReact.html

コンポーネントは、小道具や状態が変更された場合にのみ再レンダリングしようとします。 props/stateが変更されていない場合、再レンダリングは行われません。あなたの小道具は変わらない。このコンポーネントではstateをまったく使用しないので、何も変わりません。

Answer 3

propsがレンダリングされなかった理由は、render()メソッドが最初のレンダリングでエラーを投げていました。 そのエラーを修正した後で再レンダリングしています。

ご迷惑をおかけして申し訳ありません。