React 组件不使用 connect() 重新渲染

Posted 2023-02-22

【中文标题】React 组件不使用 connect() 重新渲染

【英文标题】：React component not re-rendering with connect()

【发布时间】：2017-04-10 14:04:57

【问题描述】：

我的减速机：

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

在我的组件中，我使用 connect 将状态映射到 props> 我的组件渲染功能是这样的：

render() 
    const summary = this.props.summaryContent || [];
        return (
            <div className=cx(styles['loading']) >
              <Loader  />
              "Loading\u2026"
            </div>
        );


function mapStateToProps(state, ownParams) 
    return 
        summaryContent: state.summary
    ;


export default connect(mapStateToProps)(Summary);

在 componentWillMount 上，我正在调度一个动作以更新状态摘要。现在，我的 componentWillReceiveProps 向我展示了更新后的状态摘要，但组件没有呈现。

【参考方案1】：

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

您使用summary 作为reducer 键和reducer 状态的索引。这意味着summaryContent 应该映射到state.summary.summary。 （虽然我建议将其更改为采用不那么容易混淆的命名约定。） 您的渲染函数没有以任何有用的方式使用this.props.summaryContent。它只是将它分配给一个变量，然后返回一个加载输出。 在GET_SUMMARY_REQUEST_ERROR 的情况下，您拼错了summary。

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