Peringatan: _renderNewRootComponent(): Metode render harus merupakan fungsi murni dari props dan state;

Saya mencoba menjalankan Tombol kelas, dengan meneruskan nilai ke metode visibilitasFilter(nilai){...} dan mendapatkan kesalahan

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.

Kode saya adalah sebagai berikut:

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>
        );
    };
};

Apa masalahnya dan bagaimana cara memberikan nilai ke metode ini?


reactjs javascript ecmascript-6 es6-class
person Community    schedule 14.08.2017    source sumber
comment
Kemungkinan duplikat Sintaks React ES6 untuk mengikat beberapa Parameter   -  person Shubham Khatri    schedule 14.08.2017

Jawaban (2)


arrow_upward
1
arrow_downward

Anda harus menghilangkan () setelah metode di onClick=(...), gunakan atribut html non-standar dan tulis ulang kode Anda dengan bantuan objek acara seperti ini:

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>
        );
    };
};

Semoga bisa membantu.

person Roman    schedule 14.08.2017

arrow_upward
0
arrow_downward

Sepertinya Anda segera menjalankan fungsi visibilitasFilter(). Metode render() dipanggil kemudian memanggil fungsi visibilitasFilter() yang melakukan pengiriman yang mengubah status, yang kemudian menyebabkan rendering ulang. Tidak ada apa pun dalam metode render yang dapat mengubah status Anda.

Sebaliknya, onClick akan terlihat seperti ini. onClick={this.visibilityFilter.bind(this, 'favorite')}.

Anda kemudian dapat menggunakan argumen favorite di pengendali klik sebagai parameter pertama.

person skellertor    schedule 14.08.2017