Предупреждение: _renderNewRootComponent(): методы рендеринга должны быть чистой функцией свойств и состояния;

Я пытаюсь запустить класс Buttons с передачей значения методу visibleFilter(value){...} и получаю сообщение об ошибке

Warning: _renderNewRootComponent(): Render methods should be a pure function of props and state; 
triggering nested component updates from render is not allowed. 
If necessary, trigger nested updates in componentDidUpdate. 
Check the render method of Buttons.

Мой код следующий:

class Buttons extends React.Component {
    visibilityFilter(value){
        let action = {type: 'set_visibility_filter',payload: {name: value, on: true}};
        store.dispatch(action);
    };
    render(){           
        return(
            <div className="container-fluid">
                <div className="row">
                    <div className="col-lg-4 col-md-4 col-sm-4 col-xs-0">
                        <buttom type="button" className="m-t-1-em w-100 btn btn-info" onClick={this.visibilityFilter('favorite')} >Favorite</buttom>
                    </div>
                </div>              
            </div>
        );
    };
};

В чем дело и как передать значение методу?


reactjs javascript ecmascript-6 es6-class
person Community    schedule 14.08.2017    source источник
comment
Возможный дубликат синтаксиса React ES6 для привязки нескольких параметров   -  person Shubham Khatri    schedule 14.08.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно избавиться от () после метода в onClick=(...), использовать нестандартные атрибуты html и переписать свой код с помощью объекта события следующим образом:

class Buttons extends React.Component {
    visibilityFilter(event){
        let action = {type: 'set_visibility_filter',
          payload: {name: event.target.dataset.filterName, on: true}};
        store.dispatch(action);
        console.info(' event.target.dataset.filterName:',
          event.target.dataset.filterName);
    };
    render(){           
        return(
            <div className="container-fluid">
                <div className="row">
                    <div className="col-lg-4 col-md-4 col-sm-4 col-xs-0">
                        <buttom type="button" 
                          className="m-t-1-em w-100 btn btn-info"
                          onClick={this.visibilityFilter}
                          data-filter-name="favorite">
                          Favorite
                       </buttom>
                    </div>
                </div>              
            </div>
        );
    };
};

Надеюсь, это поможет.

person Roman    schedule 14.08.2017

arrow_upward
0
arrow_downward

Похоже, вы немедленно вызываете функцию visibleFilter(). Вызывается метод render(), затем вызывается функция visibleFilter(), которая выполняет отправку, которая изменяет состояние, что затем вызывает повторный рендеринг. Ничто в методе рендеринга не должно изменять ваше состояние.

Вместо этого onClick должен выглядеть так. onClick={this.visibilityFilter.bind(this, 'favorite')}.

Затем вы можете использовать аргумент favorite в обработчике кликов в качестве первого параметра.

person skellertor    schedule 14.08.2017