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;

我的最后一个组件中的道具“ props.selectedMenuCategoryId” 的值在我更改时没有变化，该组件位于地图功能 MenuCategory 我的父类函数中的状态 handelOnClickRefundMenu

地图功能位于子组件2 MenuCategories 中。

请帮助我。

谢谢。

Answer 1

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

为了证明这一点，here's a quick'n'dirty sandbox有一个父母和两个孩子，可以根据需要向下传递道具。

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

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

Answer 2

如果要使用新的状态值更新props值，则需要

componentWillReceiveProps，只要父级中的状态发生任何变化，该方法就会被调用。

componentWillReceiveProps(nextProps) {
 console.log('componentWillReceiveProps', nextProps);
 if (this.props !== nextProps) {
  this.setState(nextProps);
 }
}

在新版本的react中，您必须使用static getDerivedStateFromProps()而不是componentWillReceiveProps

Answer 3

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

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

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

3 个答案: