React项目迁移方法至App组件后调用updateShelf报不存在错误求助

这个报错的核心原因是**selectStateUpdate函数里的this指向不对**，导致找不到组件实例上的updateShelf方法。咱们一步步拆解问题和解决方案：

问题根源 #

你定义的updateShelf是箭头函数形式的类属性，这种写法会自动把this绑定到App组件实例上，所以它本身没问题。但selectStateUpdate是普通的类方法，当它作为回调传递给子组件时，调用时的this会丢失指向（不再指向App组件实例），自然就找不到this.updateShelf了。

三种可行解决方案 #

1. 把selectStateUpdate改成箭头函数类属性

直接用箭头函数定义这个方法，让它自动绑定组件实例的this：

selectStateUpdate = (book, shelf) => { 
  console.log("Sel"+JSON.stringify(book)+shelf)
  this.updateShelf(book, shelf); 
}

2. 在构造函数中手动绑定this

如果更习惯用普通函数写法，可以在组件的构造函数里手动绑定this：

constructor(props) {
  super(props);
  // 手动绑定this到组件实例
  this.selectStateUpdate = this.selectStateUpdate.bind(this);
}

selectStateUpdate(book,shelf) { 
  console.log("Sel"+JSON.stringify(book)+shelf)
  this.updateShelf(book, shelf); 
}

3. 传递回调时用箭头函数包裹

在把selectStateUpdate传给子组件的地方，用箭头函数包裹一次，确保调用时this指向正确：

// 假设子组件叫BookItem，传递回调时这么写
<BookItem onSelect={(book, shelf) => this.selectStateUpdate(book, shelf)} />

额外说明 #

箭头函数类属性（比如你的updateShelf）是ES6+的语法，需要确保你的项目配置支持（比如Babel或者Create React App默认是支持的）。如果是老项目可能需要额外配置，但现在大部分React项目都没问题。

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