javascript - 更改reactJs父组件中的状态并不会更改react子组件中的props

Question

我有一个父级 React 组件，它有 3 个子组件，我正在更改父组件中的状态，但更改父组件中的状态并不会更改子组件中的 props。我将状态从父组件传递到子组件，但子组件内部的 props 没有改变。

我的父组件

class Parent extends Component {

    state = {
        menuCategoryId:'',
    }
    handelOnClickRefundMenu = () => {
        this.setState({menuCategoryId:''});
    }
    render() {
        return (
                <FoodMenu 
                    menuCategories={menuCategories} 
                    {...this.state}
                />
        )
    }
}

export default Parent;

子 1 组件

class FoodMenu extends Component {
    render() {
        return (
                <MenuCategories 
                    MenuCategories={menuCategories.MenuCategories}
                    selectedMenuCategoryId={this.props.menuCategoryId}
                />

        );
    }
}

export default Child1;

子 2 组件

class MenuCategories extends React.Component{
    render(){
        const MenuCategories = this.props.MenuCategories;
        const selectedMenuCategoryId = this.props.selectedMenuCategoryId;
        const renderCategories = (MenuCategories) => (
            MenuCategories ? 
                MenuCategories.map(card=>(
                    <MenuCategory
                        key={card._id}
                        {...card}
                        handleOnClickMenuCategory={this.props.handleOnClickMenuCategory}
                        selectedMenuCategoryId={this.props.selectedMenuCategoryId}
                        // propData={...this.props}
                    />
                ))
            :null
        )
        return (
            <Fragment>
                <div id="" className="food-menus-menu w-100">
                    <div className="row">
                    <OwlCarousel
                        className="owl-theme"
                        loop={true}
                        items={9}
                        autoplay={false}
                        autoplayTimeout={3000}
                        autoplayHoverPause={false}
                        nav={true}
                        navElement={'div'}
                        navText={[`<img src=${seventheenPng}>`,`<img src=${eitheenPng}>`]}
                        dots={false}
                        responsive={{
                            0:{
                                items:4
                            },
                            600:{
                                items:3
                            },
                            1000:{
                                items:7
                            }
                        }}
                    >

                            {MenuCategories ?
                                MenuCategories.length === 0 ?
                                    <div className="no_result">
                                        Sorry, no results
                                    </div>
                                :null
                            :null}
                            { renderCategories(MenuCategories)}

                        </OwlCarousel>
                    </div>
                </div>

            </Fragment>
        )
    }
};

export default MenuCategories;

子 3 组件

class MenuCategory extends Component {
    render() {

        const props = this.props;
        console.log('The values of the props are not changing here')
        console.log(props.selectedMenuCategoryId)
        return (
            <div className={`colCategory item`} onClick={()=>props.handleOnClickMenuCategory(props)}>
                <button
                    className={`btn btn-primary w-100 py-2 d-inline-flex align-items-center justify-content-center ${props.selectedMenuCategoryId ===  props._id ? 'activeMenuCategory' : ''}`}>
                    {props.name}
                </button>
            </div>
        );
    }
}

export default MenuCategory;

当我更改时， map 函数内的最后一个组件中的 Prop “props.selectedMenuCategoryId”的值不会改变我的父类函数中的状态handelOnClickRefundMenu

Map 函数位于子组件 2 MenuCategories 内。

请帮我解决这个问题。

提前致谢。

Answer 1

所有关于使用生命周期方法强制重新渲染的答案都是错误的。如果你正确地传递了 props 并且它们发生了变化，你的子组件应该自动重新渲染。

为了证明这一点，here's a quick'n'dirty sandbox它有一个 parent 和两个 child ，可以根据您的需要传递一个 Prop 。

我不知道您的代码到底出了什么问题(我们可以运行和调试的独立示例在这里会有所帮助)，但我建议将其还原为一个更简单的情况，您可以开始工作然后构建从那里开始。

eta:您确定问题与您的点击处理程序无关吗？您没有将其传递给 FoodMenu 或 MenuCategories。