React组件出现no-unused-vars警告：已用变量仍提示未使用

我来帮你拆解一下这两个警告的原因，以及怎么修复它们～

为什么会出现这些警告？ #

咱们一个个分析：

1. 'books' is assigned a value but never used

你在render方法里从props解构出了books变量：

const { onUpdateShelf, books, onUpdateBooksState } = this.props

但在render函数的后续代码里，你完全没用到这个解构出来的books——你在updateExistingShelves方法里用的是this.props.books，这和render里解构的books是两个独立的变量（虽然值相同，但解构出来的这个没有被使用），ESLint的no-unused-vars规则会严格检查这种情况，所以抛出了警告。

2. 'onUpdateBooksState' is assigned a value but never used

同理，你在render里解构出了onUpdateBooksState函数，但整个组件的任何地方都没有调用过它，它完全是个“多余的摆设”，所以警告也会触发。

怎么修复？ #

针对两个警告，分别处理：

修复books的警告

有两种简单的方式：

• 方式一（推荐）：既然render里用不到这个变量，直接从解构语句里删掉它，只保留需要的onUpdateShelf：

  const { onUpdateShelf } = this.props
  

• 方式二：如果想统一使用解构的变量，可以把books作为参数传递给updateExistingShelves，不过其实没必要，直接用this.props.books就好，删掉render里多余的解构更简洁。

修复onUpdateBooksState的警告

• 如果你确定暂时不需要这个函数，直接从解构里删掉它，同时去App.js里检查一下，是不是没必要把这个函数传给SearchBooks组件（避免冗余的props传递）。
• 如果之后会用到它，但现在想保留代码，可以给变量加个下划线前缀（ESLint默认会忽略以下划线开头的未使用变量）：

  const { onUpdateShelf, books, _onUpdateBooksState } = this.props
  

  不过还是推荐删掉暂时用不上的props，保持代码干净。

修复后的关键代码片段 #

这里给出最简洁的修复版本（只保留必要的props解构）：

render() {
  const { query, results } = this.state
  // 只解构实际用到的onUpdateShelf
  const { onUpdateShelf } = this.props
  return(
    <div className="search-books">
      {/* 后续JSX内容保持不变 */}
    </div>
  )
}

额外小提示 #

你的updateExistingShelves方法里有一行无用代码：myBooks.concat(addToState)。因为concat是返回新数组的纯方法，不会修改原数组，而你也没有把这个结果赋值给任何变量，最后返回的还是searchResults，所以这行代码完全可以删掉，让逻辑更清晰。

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