ReactJS 实现新闻Dismiss功能点击按钮报onDismissID is not a function错误

• 作用域引用错位
  onDismissID 是定义在App组件类上的实例方法，但你在Table组件的按钮点击回调里，直接通过this.onDismissID调用。此时回调里的this指向的是Table类的实例本身，Table类既没有在自身内部定义onDismissID方法，也没有从父组件拿到对应的方法引用，自然会抛出“该方法不存在”的错误。
• 状态更新键名不匹配
  就算解决了作用域的问题，代码本身还存在一个隐藏bug：App组件初始化state用的是results作为键名，setTopSearchStories方法更新状态时用的也是results，但onDismissID方法里执行setState时，写入的键名是result，键名不一致会导致状态更新无法同步到渲染数据源，删除功能即使不报错也不会生效。

1. 跨组件方法传递：在App组件渲染子组件Table时，把已经绑定好作用域的onDismissID方法作为prop传入子组件
2. 在Table组件内部，从props中读取传入的删除方法，不要尝试在自身的类实例上寻找不存在的方法
3. 修正onDismissID方法里的state键名，和初始化的state保持一致

核心修正代码片段 #

// 1. App组件render中给Table传参
return (
  <div className="page">
    <Table 
      list={lists} 
      onDismiss={this.onDismissID}
    />
  </div>
);

// 2. 修正onDismissID里的state键名
onDismissID(id) {
  const updatedHits = this.state.results.hits.filter(
    (item) => item.objectID !== id
  );
  this.setState({
    results: { ...this.state.results, hits: updatedHits }
  });
}

// 3. Table组件里的按钮点击逻辑
<button
  onClick={() => this.props.onDismiss(item.objectID)}
  type="button"
>
  Dismiss
</button>

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