React类组件报错：Cannot read properties of undefined (reading 'onDismiss')求助

跟着《Road to Learn React》教程实现列表项删除功能时，点击Dismiss按钮出现Uncaught TypeError: Cannot read properties of undefined (reading 'onDismiss')错误，且列表无法正确更新。以下是你的原代码：

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

const lst = [
  {
    title: 'React',
    url: 'http://reactjs.org',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'http://redux.js.org',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
]

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lst: lst,
    };
    this.onDismiss = this.onDismiss.bind(this);
  }

  onDismiss(id){
    function isNotId(item){
      return item.objectId !== id;
    }
    const updatedList = this.state.lst.filter(isNotId);
    this.setState({ lst: updatedList });
  }

  render() {
    const msg = "Learn React Now"
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            {msg}
          </a>

          {
            this.state.lst.map(function(item){
              return (
                <div key={item.objectID}>
                  <span>
                    <a href={item.url}>{item.title}</a>
                  </span>
                  <span>; {item.author}</span>
                  <span>; {item.num_comments}</span>
                  <span>; {item.points}</span>
                  <span>
                    <button 
                      onClick={() => this.onDismiss(item.objectID)} 
                      type='button'
                    >
                      Dismiss
                    </button>
                  </span>
                </div>
              )
            })
          }
        </header>
      </div>
    );
  }
}

export default App;

错误原因及修复： #

1. map函数中this指向错误

你在this.state.lst.map里使用了普通function(item)回调，该函数内部的this并不指向组件实例（严格模式下为undefined），导致点击按钮时调用this.onDismiss触发报错。

修复：将map的回调改为箭头函数，箭头函数会继承外部作用域的this指向：

this.state.lst.map((item) => {
  // 原返回内容不变
})

2. 属性名大小写不匹配

onDismiss方法里的isNotId函数中，判断条件写的是item.objectId，但数据源中的属性是objectID（大写D），这会导致过滤逻辑永远为true，删除操作无法生效。

修复：将item.objectId改为item.objectID：

function isNotId(item){
  return item.objectID !== id;
}

修复后的完整代码： #

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

const lst = [
  {
    title: 'React',
    url: 'http://reactjs.org',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'http://redux.js.org',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
]

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lst: lst,
    };
    this.onDismiss = this.onDismiss.bind(this);
  }

  onDismiss(id){
    function isNotId(item){
      return item.objectID !== id;
    }
    const updatedList = this.state.lst.filter(isNotId);
    this.setState({ lst: updatedList });
  }

  render() {
    const msg = "Learn React Now"
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            {msg}
          </a>

          {
            this.state.lst.map((item) => {
              return (
                <div key={item.objectID}>
                  <span>
                    <a href={item.url}>{item.title}</a>
                  </span>
                  <span>; {item.author}</span>
                  <span>; {item.num_comments}</span>
                  <span>; {item.points}</span>
                  <span>
                    <button 
                      onClick={() => this.onDismiss(item.objectID)} 
                      type='button'
                    >
                      Dismiss
                    </button>
                  </span>
                </div>
              )
            })
          }
        </header>
      </div>
    );
  }
}

export default App;

内容的提问来源于stack exchange，提问作者lowdragonfly8