Javascript 警告：_renderNewRootComponent（）：渲染方法应该是道具和状态的纯函数；

我尝试运行一个类按钮，将一个值传递给visibilityFilter（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>
        );
    };
};  

类按钮扩展React.Component{
visibilityFilter（值）{
let action={type:'set_visibility_filter'，有效负载：{name:value，on:true}；
储存、调度（行动）；
};
render（）{
返回(
最喜欢的
);
};
};  

问题是什么？如何将值传递给方法？

您需要在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>
        );
    };
};

类按钮扩展React.Component{
visibilityFilter（事件）{
let action={type:'set_visibility_filter'，
有效负载：{name:event.target.dataset.filterName，on:true}；
储存、调度（行动）；
console.info（'event.target.dataset.filterName:'，
event.target.dataset.filterName）；
};
render（）{
返回(
最喜欢的
);
};
};

---

希望它会有所帮助。

看起来您正在立即调用visibilityFilter（）函数。调用render（）方法，然后调用visibilityFilter（）函数，该函数执行更改状态的分派，然后导致重新渲染。render方法中的任何内容都不应更改您的状态

相反，onClick应该是这样的。

onClick={this.visibilityFilter.bind（this'favorite'）}

然后，您可以使用单击处理程序中的参数

favorite

作为第一个参数。

的可能重复项