คำเตือน: _renderNewRootComponent(): วิธีการเรนเดอร์ควรเป็นฟังก์ชันล้วนๆ ของอุปกรณ์ประกอบฉากและสถานะ

ฉันพยายามเรียกใช้คลาส Buttons โดยส่งค่าไปยังวิธีการมองเห็นFilter(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 Syntax สำหรับการเชื่อมโยงพารามิเตอร์หลายตัวเป็นไปได้   -  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

ดูเหมือนว่าคุณกำลังเรียกใช้ฟังก์ชันการมองเห็นตัวกรอง() ทันที เมธอด render() ถูกเรียกใช้ จากนั้นจะเรียกใช้ฟังก์ชัน allowanceFilter() ซึ่งทำหน้าที่จัดส่งที่เปลี่ยนสถานะ ซึ่งจะทำให้เกิดการเรนเดอร์อีกครั้ง ไม่มีสิ่งใดในวิธีการเรนเดอร์ที่ควรเปลี่ยนสถานะของคุณ

แต่ onClick ควรมีลักษณะเช่นนี้แทน onClick={this.visibilityFilter.bind(this, 'favorite')}.

จากนั้นคุณสามารถใช้อาร์กิวเมนต์ favorite ในตัวจัดการคลิกเป็นพารามิเตอร์แรกได้

person skellertor    schedule 14.08.2017