更改 reactJs 父组件中的状态不会更改 react 子组件中的道具

Question

我有一个父 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">

export default MenuCategory;

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

Map 函数位于 Child Component 2 MenuCategories 中。

请帮我解决这个问题。

Answer 1

所有关于使用生命周期方法强制重新渲染的答案都是错误的。如果你正确地传递了 props 并且它们发生了变化，你的子组件应该自动重新渲染。为了证明这一点，这里有一个 quick'n'dirty 沙箱，它有一个父级和两个子级，可以根据需要向下传递道具。我不知道你的代码到底出了什么问题（一个我们可以运行和调试的独立示例在这里会有所帮助），但我建议将它缩减为一个更简单的案例，你可以开始工作，然后从那里开始构建。eta：您确定问题与您的点击处理程序无关吗？您没有将它传递给 FoodMenu 或 MenuCategories。

Answer 2

为什么您将 prop 和变量命名为与组件相同的名称？它真的很难阅读，并且可能会导致您混淆是引用组件还是 prop/变量。使用骆驼套在组件 MenuCategories 中命名您的道具 MenuCategories 不仅是不好的做法，而且如果改为命名 menuCategories 可以解决问题。