reactjs - 未捕获的类型错误 : Cannot read property 'onDismiss' of undefined

Question

我有一个 React 组件帖子:

import React, { Component } from 'react';

const list = [
  {
    title: 'React',
    url: 'https://facebook.github.io/react',
    author: 'Adam Beat',
    num_comments: 4,
    points: 3,
    objectID: 10,
  }, {
    title: 'Rails',
    url: 'https://www.rubyonrails.org',
    author: 'DHH',
    num_comments: 8,
    points: 4,
    objectID: 11,
  }
]

class Posts extends Component {

  constructor(props) {
    super(props); // call the constructor of the extended class
    this.state = { // bound state with the this object
      list: list,
    };
    this.onDismiss = this.onDismiss.bind(this);
  }

  onDismiss(id) {
    // const isNotId = item => item.objectID !== id;
    // const updatedList = this.state.list.filter(isNotId);
    const updatedList = this.state.list.filter(item => item.objectID !== id);
    this.setState({ list: updatedList });
  }

  render() {
    return (
      <div className="home-page ui container">
        {
          this.state.list.map(function(item) {
            return (
              <ul key={item.objectID}>
                <li>
                  <a href={item.url}>{item.title}</a>
                </li>
                <li>{item.author}</li>
                <li>{item.num_comments}</li>
                <li>{item.points}</li>
                <li>
                  <button
                    onClick={ () => this.onDismiss(item.objectID)}
                    type="button">
                    Dismiss
                  </button>
                </li>
              </ul>
            );
          })
        }
      </div>
    );
  }
}

export default Posts;

我正在尝试通过单击“关闭”按钮从列表中删除项目。

但实际上我收到一个错误:“Uncaught TypeError:无法读取未定义的属性'onDismiss'”

我错过了什么？

Answer 1

您正在使用 this.state.list.map(function(item) { ... })，因此您的上下文是 map 函数的上下文。如果将其更改为 this.state.list.map(item => { ... }) 它将起作用。这是因为箭头函数会自动绑定(bind)到父 this 作用域。在您的 map 函数中，没有 onDismiss 函数。

当您在构造函数中绑定(bind) this 时，onDismiss 函数将接收您的组件上下文。但是，您仍然必须传递组件函数，在这种情况下您不会这样做。