更改 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 可以解决问题。