反应总是空的

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。

不确定我做错了什么，请帮忙吗？

编辑：添加更多细节

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 - 则不会重新渲染。你的道具不会改变。你根本不在这个组件上使用state，所以没有任何改变。

Answer 3

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

抱歉浪费你的时间！