阵营分量不重渲染连接()
问题描述:
我减速机:阵营分量不重渲染连接()
export default function summary(state = {
"summary":null
}, action = null) {
switch (action.type) {
case GET_SUMMARY_REQUEST_SUCCESS:
const newState = Object.assign({}, state);
newState.summary = action.data;
return newState;
break;
case GET_SUMMARY_REQUEST_ERROR:
return Object.assign({}, state, {
sumary:null
});
break;
default: return state;
}
};
根减速机:
import summary from './Summary.js'
const rootReducer = combineReducers({
summary
});
在我的部分,我使用连接映射状态道具> 我的组件渲染功能是这样的:
render() {
const summary = this.props.summaryContent || [];
return (
<div className={cx(styles['loading'])} >
<Loader width="4" />
{"Loading\u2026"}
</div>
);
}
function mapStateToProps(state, ownParams) {
return {
summaryContent: state.summary
};
}
export default connect(mapStateToProps)(Summary);
在componentWillMount,我指派给UPD动作总结在州内吃。现在,我的componentWillReceiveProps向我展示了摘要中的更新状态,但该组件未呈现。
答
我在这里可以看到几个问题:
- 您使用
summary
既作为减速键,在你的减速状态的指标。这意味着summaryContent
应该映射到state.summary.summary
。 (虽然我建议将其改为采用较少混淆的命名约定。) - 您的渲染功能不会以任何有用的方式利用
this.props.summaryContent
。它只是将它分配给一个变量,然后返回一个加载输出。 - 您在
GET_SUMMARY_REQUEST_ERROR
的案例中拼写错误summary
。
我强烈建议配置ESLint,它会提醒您像未使用和拼写错误的变量的问题。