1.App.js的代碼如下：

import React, { Component } from ‘react‘;
import Test from ‘./components/Test.jsx‘;
import ‘./assets/css/todolist.css‘;

class App extends Component {
  //組件的構造函數,當這個組件被執行的時候，constructor會自動被執行
  constructor(props){
    //固定的寫法
    super(props);
    this.state = {
      list: [
        ‘learn react‘,
        
 
‘learn english‘,
        ‘learn vue‘
      ]
    }
  }

  handleBtnClick() {
    this.state.list.push(‘hello world‘);
  }

  render() {
    return (
      <div>
        <div>
          <Test/>
        </div>

        <div className="todoListStyle">
          <div>
          <input />
          <button onClick={this
 
.handleBtnClick}>Add</button>
          </div>
          <ul>
            {
              this.state.list.map((item) => {
                return <li>{item}</li>
              })
            }
          </ul>
        </div>
      </div>
    );
  }
}

export 
 
default App;

運行項目，控制臺中報錯：

分析：handleBtnClick這個函數執行的時候，函數體裏面的this指的是button這個按鈕，這個按鈕上是沒有state這個變量的，所以我們希望點擊Add這個按鈕的時候，handleBtnClick這個函數中的this指向的是當前這個組件

我們可以把代碼改寫成這樣 onClick={this.handleBtnClick.bind(this)} 這句代碼的意思是這個函數執行的時候，this永遠都指向外面的這個this，外面的這個this指向的是當前這個組件

但是控制臺中還會有另外一個錯誤：

分析：在react中，當要改變this.state中的數據，不要直接去調用this.state.list這樣去改，需要調用react提供給我們的一個方法：setState

並且對於返回的每一個<li>標簽，都需要有一個key

所以上面的代碼應改寫為：

react學習過程中遇到的錯誤記錄