Reactjs redux store 发生变化，但组件的 props 没有变化答案

【问题标题】：Reactjs redux store changes but in component's props doesn't changeReactjs redux store 发生变化，但组件的 props 没有变化
【发布时间】：2020-09-22 18:40:28
【问题描述】：

我正在尝试显示导航取决于 categoryURL 的变化 redux 存储和更改其他组件中的状态。 Redux 更改了 store，它运行良好。但在我的组件“this.props.categoryUrl”不反映价值。不能找出原因？

import React, {Component} from 'react';
import NavigationItems from './NavigationItems/NavigationItems';
import classes from './Navigation.module.css';
import {connect} from 'react-redux';

const mapStateToProps = state => {
    console.log(state)
    return {
        categoryURL: state.categoryUrl
    };
};

class navigation extends Component {

    componentDidMount() {
        console.log(this.props.categoryUrl);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('NAVIGATION!', this.props.categoryUrl);
    }

    render() {
        let nav = null;
        if (this.props.categoryUrl) {
            nav = (
                    <div className={classes.Navigation}>
                        <NavigationItems/>
                    </div>
            )
        }

        return (
            <>
                {nav}
            </>
        )
    }
}

export default connect(mapStateToProps, null)(navigation);

【问题讨论】：

错字 - 根据您的 mapStateToProps 应该是 this.props.categoryURL

标签： reactjs redux react-redux store

【解决方案1】：

在“正常”的 React 中，需要使用 <Navigation/>（开头的大写字母）而不是 <navigation/>。此外，如果 <Navigation/> 正在被另一个 React 组件使用，那么可能需要添加将在 <Navigation/> 内执行的代码以刷新您正在使用 <Navigation/> 的组件（某种回调传递给 <Navigation/> ）。就是这样，或者将所有<Navigation/> 的代码移动到您正在使用<Navigation/> 的组件中。我就是这样解决这类问题的。

【讨论】：