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更改时渲染。修复错误后重新渲染。

抱歉浪费你的时间！

反应总是空的

3 个答案: