Изменение состояния в родительском реактиве не изменяет реквизиты в дочерних компонентах реагирования.

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">
                    <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 "props.selectedMenuCategoryId" в моем последнем компоненте, который находится внутри Функция карты MenuCategory , не меняется, когда я меняю состояние в my Функция родительского класса handelOnClickRefundMenu

Функция Map находится внутри дочернего компонента 2 MenuCategories .

Пожалуйста, помогите мне в этом, пожалуйста.

Заранее спасибо.

Answer 1

Все ответы о принудительном повторном рендеринге с использованием методов жизненного цикла неверны.Если вы правильно пропустите опоры, и они изменятся, ваши дочерние компоненты должны автоматически выполнить рендеринг.

Чтобы продемонстрировать это, , вот быстрая песочница , в которой есть родитель и двадети, которые передают опору, как вам нужно.

Я не знаю точно, что не так с вашим кодом (здесь может помочь самодостаточный пример, который мы можем запустить и отладить), но я предлагаю рассмотреть его в более простом случае, чтобы вы могли приступить к работе изатем создайте его.

eta: Вы уверены, что проблема не связана с обработчиком кликов?Вы не передаете его в FoodMenu или MenuCategories.

Answer 2

Почему вы называете свою опору и переменные такими же, как ваш компонент?Это действительно трудно читать и, вероятно, вызывает путаницу относительно того, используете ли вы компонент или переменную / переменную.Используйте верблюжий случай

Именование вашей проповеди MenuCategories внутри компонента MenuCategories - не только плохая практика, но и может решить проблему, если вместо нее будет названо menuCategories.

Answer 3

componentWillReceiveProps требуется, если вы хотите обновить значения реквизита новыми значениями состояния, этот метод будет вызываться всякий раз, когда происходит какое-либо изменение состояния в родительском.

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

В новой версии реакции вы должны использовать static getDerivedStateFromProps() вместо componentWillReceiveProps