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

Question

I'm tryin to show navigation depends on changes of categoryURL from redux store and changing the state in other components. Redux changes the store and it works fine. But in my component "this.props.categoryUrl" doesn't reflect on value. Can't find out why?

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

Answer 1

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

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

Reactjs redux store changes but in component's props doesn't change

store

reactjs

redux

react-redux