javascript - 单击“关闭”时无法删除列表项？

Question

代码没有错误，请问问题出在哪里？ 我无法关闭列表项并更改组件的状态!
我应该怎么做才能使我的解雇发挥作用？是否有如上所述更好的方法？

这是代码:

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: 'facebook github',
    url: 'https://facebook.github.io/',
    author: 'Janardhan',
    num_comments: 3,
    points: 6,
    objectID: 1,
  },
]
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list
    }
    this.onDismiss = this.onDismiss.bind(this);
  }
  onDismiss(id) {
    const isNotID = item => item.objectID !== id;
    const updatedList = this.state.list.filter(isNotID)
    this.setState({ list: updatedList })
    console.log("dismissed??")
  }

  render() {
    return (
      <div className="App">
        {list.map(item =>
          <div key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.points}</span>
            <span>{item.num_comments}</span>
            <button onClick={() => this.onDismiss(item.objectID)} >Dismiss</button>
          </div>
        )}
      </div>
    );
  }
}

export default App;

Answer 1

问题来自这里:

const isNotID = item => item.objectId !== id;

它应该是objectID而不是objectId

编辑

并且在render方法中，应该是this.state.list.map