更改reactJs父级中的状态不会更改react子级组件中的props

Question

我有一个Parent React组件，并且有3个子组件，我正在更改父组件的状态，但是更改父组件的状态并没有更改子组件的道具。我将状态从父组件传递给了子组件，但道具没有在子组件内部进行更改。

我的父母

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;

当我在父类函数 handelOnClickRefundMenu中更改状态时，在地图函数 MenuCategory中的最后一个组件中的道具“ props.selectedMenuCategoryId”的值未更改

映射功能位于子组件2 MenuCategories中 。

请帮助我。

提前致谢。

Answer 1

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

为了说明这一点， 这是一个快速的“肮脏”沙箱 ，其中有一个父级和两个子级，可以根据需要向下传递道具。

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

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

Answer 2

为什么将prop和变量命名为与组件相同的名称？ 确实很难阅读，并且可能导致您是引用组件还是prop /变量。 使用骆驼的情况

在组件MenuCategories中命名道具MenuCategories不仅是一种不好的做法，而且如果将其命名为menuCategories，则可以解决此问题。