React调用updateShelf触发TypeError: Object(...) is not a function错误

我帮你分析下这个错误的根源，然后一步步搞定它：

问题核心原因 #

你在App.js里尝试导出类的实例方法updateShelf，但这个方法属于BooksApp类的实例，不是模块级别的独立函数。直接导出export const updateShelf = updateShelf;其实导出的是undefined，所以Book.js导入后调用时就会抛出TypeError: Object(...) is not a function错误。另外，React组件间的方法传递应该通过props，而不是直接跨文件导入类方法。

下面是具体的修复步骤：

1. 修复App.js的方法绑定与错误导出 #

首先，移除App.js最后一行错误的导出代码：

// 删掉这行！
export const updateShelf = updateShelf;

然后，确保updateShelf方法的this绑定（类方法默认不绑定this，直接传递会导致this指向undefined），同时修正state修改的逻辑（React要求state不可直接修改，要创建新数组）：

// 把原来的updateShelf方法改成这样
updateShelf(book, shelf) {
  if (shelf === '' || shelf === 'none') return;

  // 创建新的books数组，避免直接修改state
  const updatedBooks = this.state.books.map(b => {
    if (b.id === book.id) {
      return { ...b, shelf };
    }
    return b;
  });

  this.setState({ books: updatedBooks });
  BooksAPI.update(book, shelf);
}

// 在render里传递方法时，用箭头函数确保this指向正确
render() {
  return (
    <div>
      <Route exact path='/' render={() => (
        <ListBooks 
          books={this.state.books} 
          onUpdateShelf={(book, shelf) => this.updateShelf(book, shelf)} 
        />
      )} />
      <Route exact path='/search' render={() => (
        <SearchBooks books={this.state.books} />
      )} />
    </div>
  )
}

2. 在ListBooks.js中传递方法给Book组件 #

ListBooks已经从App接收到了onUpdateShelf props，需要把它传递给子组件Book：

// 找到渲染Book的代码，添加onUpdateShelf props
{ getBooksForShelf(shelf.key).map((book) => (
  <Book 
    key={book.id} 
    book={book} 
    onUpdateShelf={this.props.onUpdateShelf} 
  />
))}

同时，更新ListBooks的propTypes，添加onUpdateShelf的类型校验：

static propTypes = {
  books: PropTypes.array.isRequired,
  onUpdateShelf: PropTypes.func.isRequired // 新增这行
}

3. 修改Book.js从props获取方法 #

移除Book.js中错误的导入语句，改为从props接收方法：

// 删掉这行！
import { updateShelf } from './App'

// 更新propTypes，添加onUpdateShelf的校验
static propTypes = {
  book: PropTypes.object.isRequired,
  onUpdateShelf: PropTypes.func.isRequired // 新增这行
}

// 修改select的onChange事件，调用props里的方法
<select 
  value={book.shelf} 
  onChange={(e) => this.props.onUpdateShelf(book, e.target.value)}
>

这样修改后，组件间的方法传递就符合React的数据流规范，错误也会被修复。

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