問題描述：

      在react學習中，通過定義一個按鈕，然後為此按鈕繫結一個事件，此事件主要的功能就是使用者點選按鈕，就會在相應的頁面增加一個item選項。在程式碼層面來說，在程式碼裡的state下的list會增加一個數據，如下所示：

      初始化函式中定義了一個state變數，此變數下有一個空的list陣列，來存放資料：

constructor(props){ //元件初始化函式，一呼叫元件就自動執行
super(props); //初始化一些引數，不必理會
this.state={ //定義state來存放資料
list:[


],
reactid:0 //此引數主要是解決key的報錯問題而定義
}
}

 

     按鈕上繫結的事件，想通過此事件動態的增加list中的內容：

handleBtnClick(){
this.state.list.push("hello word"); //直接更新資料無反應
}

     按鈕上繫結事件：

<button onClick={this.handleBtnClick}>add</button>

      上述程式碼在編寫時是沒有錯誤提示的，但是在點選按鈕時就會有報錯，說是“state”屬性沒有找到，然後查閱資料才發現是this的問題，解決之後點選按鈕，此時沒有錯誤提示，但是資料並沒有增加，於是又是查閱資料，才找到解決方法。

解決方法：

      1 關於this的解決方法（state報錯）

      1）在我們繫結時間的時候，“onClick={this.handleBtnClick}”中的這個this實際上指定的就是這個元件，這部分是沒有錯誤的，你點選按鈕，這個函式它是能呼叫的，問題就出現在函式裡面“this.state.list.push("hello word")”這個語句上面，而且報錯也是說這裡的state沒有找到。

      2）在函式中的這個this其實它是沒有指向這個元件的，我們想修改這個元件裡的state下的list內容，但是它並沒有指向這個元件，那麼它肯定就報錯了，那麼你可能會問，它到底指向哪，這的this其實指向的是button這個按鈕。

      3）問題找到後，我們就要解決，那麼此問題解決的最簡單的方法就是在繫結事件的時候通過bind這個函式，改變事件中this的指向，如下;

<button onClick={this.handleBtnClick.bind(this)}>add</button>

       通過bind(this)這個語句，我們將函式中的this指向改變成了指向這個元件，所以，此時我們點選按鈕的時候它就沒有關於state的報錯了。

      2 資料不增加的解決方法

      1）雖然上述步驟解決了state的報錯問題，但是點選按鈕的時候資料並不會增加，原來，我們在react中不能直接使用push這種做法在list中新增內容，而是要用setState方法來改變，如下：

handleBtnClick(){
this.setState({
list:[...this.state.list,'hello world']
});
}

      2）上述的陣列中使用了ES6的語法，實現了每點選一次按鈕，就會增加一個hello word的內容，如圖：