Prop在react中总是null

Question

我有一个必须显示对象详细信息的组件。这是在单击一行时从tablecoment实例化的。传递对象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。

不知道我做错了什么，请帮忙?

编辑:添加更多细节

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

mapStateToProps函数中的对象是作为props传递的对象:

 {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发生改变时才会尝试重新渲染。如果props/state没有改变，则不会发生重新渲染。你的道具不会改变。在这个组件上根本不使用state，所以也没有什么变化。

Answer 3

render()方法在第一次渲染时抛出错误，这就是为什么它没有在props更改时渲染。在我修复了这个错误后，它正在重新渲染。

对不起，浪费了你的时间!