Cannot read property 'onDismiss' of undefined

之前在看《React 学习之道》中文版的时候，下面的例子执行报错，

import React, { Component } from 'react';

import './App.css';

const list = [
  {
  title: 'React',
  url: 'https://facebook.github.io/react/',
  author: 'Jordan Walke',
  num_comments: 3,
  points: 4,
  objectID: 0
  },
  {
  title: 'Redux',
  url: 'https://github.com/reactjs/redux',
  author: 'Dan Abramov, Andrew Clark',
  num_comments: 2,
  points: 5,
  objectID: 1
  },
  ];

class App extends Component {
  constructor(prop){
    super(prop);
    this.state={
      list:list
    };

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

  onDismiss(id){
    const updateList = this.state.list.filter(item=>{return item.objectID !== id;});
    this.setState({list:updateList});
  }
  render() {
    return (
      <div className="App">
        {
          this.state.list.map(function(item){
            return (
              <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
            <span>{item.author}</span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>
              <button  onClick={()=>this.onDismiss(item.objectID)} type="button">Dissmis</button>
            </span>
            </div>
            );
          })
        }
      </div>
    );
  }
}

export default App;

react完全是菜鸟，比较了下，书里面写的是this.state.list.map(item =>{}） 而我的代码里是this.state.list.map（function（item){});

原来后面的方式，this.onDismiss 中this的上下文是map()函数，函数里面当然没有onDismiss的定义了，应该用第一种箭头函数的定义方式，这样this.onDismiss的this就是这个类了，可以找到onDismiss了。还是javascript的基础不扎实啊。

转下别人的说明：

普通函数中的this:

1. this总是代表它的直接调用者,  例如 obj.func , 那么func中的this就是obj

2.在默认情况，没找到直接调用者,  则this指的是 window

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply, bind(ES5新增)绑定的, this指的是 绑定的对象

普通函数中的this:

1. this总是代表它的直接调用者,  例如 obj.func , 那么func中的this就是obj

2.在默认情况，没找到直接调用者,  则this指的是 window

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply, bind(ES5新增)绑定的, this指的是 绑定的对象

箭头函数中的this

1. 默认指向在定义时作用域, 它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window（即继承父级的this）;

下面通过一些例子来研究一下 this的一些使用场景

原因：箭头函数不会自动绑定局部变量，如this，arguments，super(ES6)，new.target(ES6)等

所以箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用
--------------------- 
作者：天蒙蒙亮 
来源：CSDN 
原文：https://blog.csdn.net/qq_38719039/article/details/80925240 
版权声明：本文为博主原创文章，转载请附上博文链接！