React跨组件更新数据时提示props.onItemClick不是函数如何解决

问题根因 #

你出现Uncaught TypeError: this.props.onItemClick is not a function报错的核心原因是父组件给子组件传props的时候错误添加了双引号，导致传入的onItemClick是静态字符串而非函数。同时还存在几个隐含的指向、数据获取问题，按以下步骤修复即可：

修复步骤 #

1. 移除props传递的多余引号 #

React JSX语法中传递动态值不需要加双引号，加引号会被识别为静态字符串，修改父组件Dashboard的渲染代码：

render() {
  return <>
    <div className='dashboard'>
      <div className='dashboard__wrapper'>
        {/* 去掉props外层的双引号 */}
        <SelectItem onItemClick={this.onItemClick} />
        <EditItem item={this.state.currentItem} />
      </div>
    </div>
  </>
}

2. 修复父组件方法的this指向问题 #

你当前定义的onItemClick是普通类方法，调用时this不会指向组件实例，后续调用setState会报错，两种修复方案二选一即可：

• 方案1：改为箭头函数（类属性写法，更简洁）

// 把普通方法改成箭头函数
onItemClick = (item) => {
  this.setState({
    currentItem: item
  })                                        
}

• 方案2：在构造函数中绑定this

constructor(props) {
  super(props);
  this.state = {
    currentItem: {}
  }
  // 绑定方法的this指向
  this.onItemClick = this.onItemClick.bind(this);
}

3. 优化点击事件传参（可选但推荐） #

直接读取DOM属性拿ID的写法非常不稳定（如果后续调整标签属性顺序会直接导致取值错误），更推荐在绑定点击事件时直接传入当前遍历的item对象：
修改SelectItem的列表渲染代码：

<ul>
  {items.map(item => (
    <li 
      onClick={() => this.itemClicked(item)} 
      key={item._id}
    > 
      {item.name} 
    </li>
  ))}
</ul>

对应的itemClicked方法简化为：

itemClicked = (item) => {
  console.log(item._id);
  if (this.props.onItemClick) {
    // 可以传完整item对象，也可以按需只传item._id
    this.props.onItemClick(item)
  }
}

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