React - uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'setState' ของที่ไม่ได้กำหนด

ฉันได้รับข้อผิดพลาดดังต่อไปนี้

Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'setState' ของที่ไม่ได้กำหนด

แม้หลังจากการเชื่อมโยงเดลต้าในตัวสร้าง

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

นี่คือสาเหตุที่ไม่ได้ถูกผูกไว้กับthis.deltathis

เพื่อผูกชุดthis.delta = this.delta.bind(this)ในตัวสร้าง:

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}

ขณะนี้คุณกำลังโทรเข้าเล่ม แต่การผูกส่งคืนฟังก์ชันที่ถูกผูกไว้ คุณต้องตั้งค่าฟังก์ชั่นเป็นค่าที่ถูกผูกไว้

ในES7 + (ES2016) คุณสามารถใช้การทดลองฟังก์ชั่นการผูกไวยากรณ์ประกอบการ::ที่จะผูก มันเป็นน้ำตาลทรายและจะทำเช่นเดียวกับคำตอบของดาวินทริน

จากนั้นคุณสามารถเขียนซ้ำthis.delta = this.delta.bind(this);เป็นthis.delta = ::this.delta;

สำหรับES6 + (ES2015) คุณสามารถใช้ฟังก์ชั่นลูกศร ES6 + ( =>) เพื่อให้สามารถใช้งานthisได้

delta = () => {
    this.setState({
        count : this.state.count + 1
    });
}

ทำไม จาก Mozilla doc:

จนกว่าจะถึงฟังก์ชั่นลูกศรทุกฟังก์ชั่นใหม่ที่กำหนดไว้ของตัวเองนี้ค่า [ ... ] สิ่งนี้พิสูจน์แล้วว่าน่ารำคาญด้วยรูปแบบการเขียนโปรแกรมเชิงวัตถุ

ลูกศรฟังก์ชั่นการจับภาพนี้ค่าของบริบทการปิดล้อม [ ... ]

มีความแตกต่างของบริบทระหว่างคลาส ES5 และ ES6 ดังนั้นจะมีความแตกต่างเล็กน้อยระหว่างการใช้งานเช่นกัน

นี่คือเวอร์ชั่น ES5:

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

และนี่คือเวอร์ชั่น ES6:

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta.bind(this)}>+</button>
            </div>
            );
    }
}

เพียงระวังข้างความแตกต่างของไวยากรณ์ในการใช้คลาสมีความแตกต่างในการเชื่อมโยงตัวจัดการเหตุการณ์

ในรุ่น ES5 มันเป็น

              <button onClick={this.delta}>+</button>

ในเวอร์ชัน ES6 มันคือ:

              <button onClick={this.delta.bind(this)}>+</button>

เมื่อใช้รหัส ES6 ในการตอบสนองมักจะใช้ฟังก์ชั่นลูกศรเพราะบริบทนี้จะถูกผูกไว้กับมันโดยอัตโนมัติ

ใช้สิ่งนี้:

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

แทน:

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

คุณไม่จำเป็นต้องผูกอะไรเลยเพียงใช้ฟังก์ชั่นลูกศรดังนี้:

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

    }
    //ARROW FUNCTION
    delta = () => {
        this.setState({
            count: this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

คุณยังสามารถใช้:

<button onClick={()=>this.delta()}>+</button>

หรือ:

<button onClick={event=>this.delta(event)}>+</button>

หากคุณผ่านพารามิเตอร์บางอย่าง ..

คุณต้องผูกสิ่งนี้กับตัวสร้างและจำไว้ว่าการเปลี่ยนแปลงตัวสร้างต้องเริ่มต้นเซิร์ฟเวอร์ใหม่ มิฉะนั้นคุณจะจบลงด้วยข้อผิดพลาดเดียวกัน

คุณต้องผูกเมธอดของคุณด้วย 'this' (วัตถุเริ่มต้น) ดังนั้นสิ่งที่ฟังก์ชั่นของคุณอาจผูกไว้กับตัวสร้าง

constructor(props) {
    super(props);
    this.state = { checked:false };

    this.handleChecked = this.handleChecked.bind(this);
}

handleChecked(){
    this.setState({
        checked: !(this.state.checked)
    })
}

render(){
    var msg;

    if(this.state.checked){
        msg = 'checked'
    }
    else{
        msg = 'not checked'
    }

    return (
        <div>               
            <input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
            <h3>This is {msg}</h3>
        </div>
    );

ข้อผิดพลาดนี้สามารถแก้ไขได้ด้วยวิธีการต่างๆ -

• หากคุณใช้ไวยากรณ์ES5ดังนั้นตามเอกสาร js ของ Reactคุณต้องใช้วิธีการเชื่อมโยง

  บางอย่างเช่นนี้สำหรับตัวอย่างข้างต้น:

  this.delta = this.delta.bind(this)

• หากคุณกำลังใช้ไวยากรณ์ES6ดังนั้นคุณไม่จำเป็นต้องใช้วิธีเชื่อมโยงคุณสามารถทำได้ด้วยวิธีนี้:

  delta=()=>{ this.setState({ count : this.state.count++ }); }

มีสองวิธีแก้ไขปัญหานี้:

วิธีแรกคือการเพิ่มคอนสตรัคเตอร์ให้กับอุปกรณ์ของคุณ

constructor(props) {
        super(props);

        ...

        this.delta = this.delta.bind(this);
    }

ดังนั้นทำสิ่งนี้:

this.delta = this.delta.bind(this); 

แทนสิ่งนี้:

this.delta.bind(this);

วิธีที่สองคือใช้ฟังก์ชั่นลูกศรแทน:

delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

ที่จริงลูกศรฟังก์ชั่นไม่ได้thisผูกเป็นของตัวเอง ฟังก์ชั่นลูกศรศัพท์bindบริบทของพวกเขาดังนั้นthisจริง ๆ แล้วหมายถึงบริบทที่มามา

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชั่นการผูก:

ฟังก์ชั่นการผูก ทำความเข้าใจกับการผูก JavaScript ()

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชั่นลูกศร:

Javascript ES6 - ฟังก์ชั่นลูกศรและคำศัพท์ this

คุณต้องผูกกิจกรรมใหม่ด้วยคำหลักนี้ตามที่ฉันพูดถึงด้านล่าง ...

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta = this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
      }
    }

เพิ่ม

onClick = {this.delta.bind (นี้)}

จะแก้ปัญหา ข้อผิดพลาดนี้เกิดขึ้นเมื่อเราพยายามเรียกใช้ฟังก์ชันของคลาส ES6 ดังนั้นเราจำเป็นต้องผูกเมธอด

ฟังก์ชั่นอาจจะมีลูกศรทำให้ชีวิตของคุณง่ายขึ้นเพื่อหลีกเลี่ยงผลผูกพันนี้คำหลัก ชอบมาก

 delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

แม้ว่าคำถามนี้มีคำตอบอยู่แล้ว แต่ฉันต้องการแบ่งปันของฉันเพื่อให้ชัดเจนฉันหวังว่ามันจะช่วยได้:

/* 
 * The root cause is method doesn't in the App's context 
 * so that it can't access other attributes of "this".
 * Below are few ways to define App's method property
 */
class App extends React.Component {
  constructor() {
     this.sayHi = 'hello';
     // create method inside constructor, context = this
     this.method = ()=> {  console.log(this.sayHi) };

     // bind method1 in constructor into context 'this'
     this.method1 = this.method.bind(this)
  }

  // method1 was defined here
  method1() {
      console.log(this.sayHi);
  }

  // create method property by arrow function. I recommend this.
  method2 = () => {
      console.log(this.sayHi);
  }
   render() {
   //....
   }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

  </head>
  <body>
  <div id="root"></div>
    <script type="text/babel">

        class App extends React.Component{

            constructor(props){
                super(props);
                this.state = {
                    counter : 0,
                    isToggle: false
                }
            this.onEventHandler = this.onEventHandler.bind(this);   
            }

            increment = ()=>{
                this.setState({counter:this.state.counter + 1});
            }

            decrement= ()=>{
                if(this.state.counter > 0 ){
                this.setState({counter:this.state.counter - 1});    
                }else{
                this.setState({counter:0});             
                }
            }
            // Either do it as onEventHandler = () => {} with binding with this  // object. 
            onEventHandler(){
                this.setState({isToggle:!this.state.isToggle})
                alert('Hello');
            }


            render(){
                return(
                    <div>
                        <button onClick={this.increment}> Increment </button>
                        <button onClick={this.decrement}> Decrement </button>
                        {this.state.counter}
                        <button onClick={this.onEventHandler}> {this.state.isToggle ? 'Hi':'Ajay'} </button>

                    </div>
                    )
            }
        }
        ReactDOM.render(
        <App/>,
        document.getElementById('root'),
      );
    </script>
  </body>
  </html>

เพียงแค่เปลี่ยนคำสั่งการผูกของคุณจากสิ่งที่คุณต้อง => this.delta = this.delta.bind (นี้);

1. ตรวจสอบสถานะการ ตรวจสอบสถานะว่าคุณสร้างคุณสมบัติเฉพาะหรือไม่

this.state = {
            name: "",
            email: ""
            }
            
           
            
this.setState(() => ({ 
             comments: comments          //comments not available in state
             })) 

2. ตรวจสอบ (นี่) ถ้าคุณทำ setState ภายในฟังก์ชั่นใด ๆ (เช่น handleChange) ตรวจสอบว่าฟังก์ชั่นผูกกับสิ่งนี้หรือฟังก์ชั่นควรจะเป็นฟังก์ชั่นลูกศร

## 3 วิธีในการผูกกับฟังก์ชันด้านล่าง ##

//3 ways for binding this to the below function

handleNameChange(e) {  
     this.setState(() => ({ name }))
    }
    
// 1.Bind while callling function
      onChange={this.handleNameChange.bind(this)}
      
      
//2.make it as arrow function
     handleNameChange((e)=> {  
     this.setState(() => ({ name }))
     })
    
//3.Bind in constuctor 

constructor(props) {
        super(props)
        this.state = {
            name: "",
            email: ""
        }
        this.handleNameChange = this.handleNameChange.bind(this)
        }

หากคุณกำลังใช้ไวยากรณ์ ES5 คุณต้องผูกมันอย่างถูกต้อง

this.delta = this.delta.bind(this)

และถ้าคุณกำลังใช้ ES6 และสูงกว่าคุณสามารถใช้ฟังก์ชั่นลูกศรแล้วคุณไม่จำเป็นต้องใช้ผูก ()มัน

delta = () => {
    // do something
  }