Question

我的减速机：

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;
    }
};

Root reducer：

import summary from './Summary.js'
const rootReducer = combineReducers({
    summary
});

在我的组件中，我使用连接将地图状态映射到道具＆gt; 我的组件渲染功能是这样的：

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上，我将调度一个动作以在摘要状态下更新。现在，我的componentWillReceiveProps向我展示了摘要中的更新状态，但该组件未呈现。

Answer 1

我可以在这里看到一些问题：

您使用summary作为reducer键和reducer状态中的索引。这意味着summaryContent应该映射到state.summary.summary。（虽然我建议将其更改为采用较少混淆的命名约定。）
您的渲染功能无法以任何有用的方式使用this.props.summaryContent。它只是将它分配给一个变量，然后返回一个加载输出。
您summary案例中的GET_SUMMARY_REQUEST_ERROR拼写错误。

我强烈建议您配置ESLint，它会提醒您未使用和拼写错误变量等问题。

React组件没有使用connect（）重新渲染

1 个答案: