में एक मौजूदा राज्य संक्रमण त्रुटि दौरान अद्यतन कर सकता हूँ नहीं प्रतिक्रिया

Question

वापसी

अंदर मेरे प्रस्तुत करना() मैं इन:

<button onClick={ this.selectTimeframe('Today') } 
     className={ this.setActiveIf('Today') } type="button">Today</button> 

इस समारोह है कौन सा:

selectTimeframe(timeframe) { 
    // this.setState({ timeframe }); 
} 

^मैं setState बाहर टिप्पणी करने के लिए है अभी के लिए अन्यथा मुझे वह त्रुटि मिलेगी जो मैंने ऊपर पोस्ट की है और ऐप टूट जाता है।

मैं अपने निर्माता में यह है:

this.selectTimeframe = this.selectTimeframe.bind(this);

मैं इस answer here मिला, लेकिन यह मतलब नहीं है, मैं कैसे चर में पारित करने के लिए लगता है कि कर रहा हूँ? या वह कह रहा है कि हर अद्वितीय बटन को एक अद्वितीय कार्य की आवश्यकता होती है? इसे प्रस्तुत करने के अंदर बुलाए जाने से बचने के लिए?

पूर्ण कोड

import React from 'react'; 

export class TimeframeFilter extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      timeframe: 'Today' 
     }; 

     this.selectTimeframe = this.selectTimeframe.bind(this); 
     this.setActiveIf = this.setActiveIf.bind(this); 
    } 

    componentDidMount() { 
     console.log('%c TimeframeFilter componentDidMount', 'background: #393939; color: #bada55', this.state); 
    } 

    selectTimeframe(timeframe) { 
     // this.setState({ timeframe }); 
    } 

    setActiveIf(timeframe) { 
     return this.state.timeframe === timeframe ? 'btn btn-default active' : 'btn btn-default'; 
    } 

    render() { 
     return (
      <div className="fl"> 
       <span className="label label-default mr10">Timeframe</span> 
       <div className="btn-group btn-group-sm mr20" role="group"> 
        <button onClick={ this.selectTimeframe('Today') } 
          className={ this.setActiveIf('Today') } type="button">Today</button> 
        <button onClick={ this.selectTimeframe('Week') } 
          className={ this.setActiveIf('Week') } type="button">Week</button> 
        <button onClick={ this.selectTimeframe('Month') } 
          className={ this.setActiveIf('Month') } type="button">Month</button> 
        <button onClick={ this.selectTimeframe('Year') } 
          className={ this.setActiveIf('Year') } type="button">Year</button> 
        <button onClick={ this.selectTimeframe('All') } 
          className={ this.setActiveIf('All') } type="button">All</button> 
       </div> 
      </div> 
     ); 
    } 
} 

export default TimeframeFilter; 

Answer 1

आप का उपयोग arrow function or bind method अन्यथा यह सिर्फ onClick हर rerender को मान देने के लिए कार्यान्वित onClick कार्य करने के लिए मूल्य गुजर जाना चाहिए होता है और यदि आप इसे में setState उपयोग करें, यह एक rerender कॉल करेंगे और फिर से कॉल करने के लिए funciton और इस तरह प्रक्रिया को दोहराना।

ऐसा

<button onClick={()=> this.selectTimeframe('Today') } 
     className={ this.setActiveIf('Today') } type="button">Today</button> 

या

<button onClick={ this.selectTimeframe.bind(this, 'Today') } 
     className={ this.setActiveIf('Today') } type="button">Today</button> 

आशा मैं आप के लिए यह स्पष्ट रूप से व्याख्या करने में सक्षम था मत करो। :)

संपादित करें: हालांकि उपर्युक्त दृष्टिकोण समस्या हल करता है लेकिन प्रदर्शन कारणों से इष्टतम दृष्टिकोण नहीं है। हमें रेंडर के अंदर बाध्यकारी विधि से बचना चाहिए क्योंकि पुन: प्रस्तुत करने के दौरान यह पुराने का उपयोग करने के बजाय नए तरीकों का निर्माण करेगा, जो प्रदर्शन को प्रभावित करेगा।

How to avoid binding inside the render method

Answer 2

पर इस जवाब देखें वर्तमान में आप अपने विधि प्रस्तुत करना में this.selectTimeframe('Today') कहते हैं। आप शायद,

onClick={() => this.selectTimeframe('Today') }

या थोड़ा समझदारी भरा तरीका है

<button onClick={ this.selectTimeframe.bind(this, 'Today') } className={ this.setActiveIf('Today') } type="button">Today</button> 

selectTimeframe.bind(key) { 
    switch(key){ 
    case 'Today': 
     //your logic 
     break; 
    } 
}