Javascript 使用选择选项响应搜索筛选器

我已经在我的react应用程序中实现了搜索过滤器，一切正常，直到我做了选择标记，以更改搜索过滤器标准

class BookList extends Component {

state = {
search: '',
selectedValue: 'name',
options: [
  {
    name: 'Name',
    value: 'name',
  },
  {
    name: 'Author',
    value: 'author',
  },
  {
    name: 'ISBN',
    value: 'isbn',
  }
]
}

updateSearch (e) {
this.setState({search: e.target.value});
}

selectedValueHandler (e) {
this.setState({selectedValue: e.target.value});
}

render () {
      if (this.state.selectedValue === 'name') {
        let filteredBooks = this.props.books.filter(book => {
          return book.name.toLowerCase().indexOf(this.state.search) !== -1;
        })
      } else if (this.state.selectedValue === 'author') {
        let filteredBooks = this.props.books.filter(book => {
          return book.author.toLowerCase().indexOf(this.state.search) !== 
      -1;
        })
      } else if (this.state.selectedValue === 'isbn') {
        let filteredBooks = this.props.books.filter(book => {
          return book.isbn.indexOf(this.state.search) !== -1;
        })
      }

return (
  <div>
    <div className='SearchInput'>
      <input type='text'
      value={this.state.search}
      onChange={this.updateSearch.bind(this)} />
      <select
        id="searchSelect"
        name="searchSelect"
        onChange={this.selectedValueHandler.bind(this)} >
        {this.state.options.map(item => (
          <option key={item.value} value={item.value}>
            {item.name}
          </option>
        ))}
      </select>
    </div>
    <div className='BookList'>
      <ul>
        {filteredBooks.map(book => {
          return <Book key={book.book_id} name={book.name} author={book.author} isbn={book.isbn} />
        })}
      </ul>
    </div>
</div>
)
}
};

 export default BookList;

类图书列表扩展组件{
状态={
搜索：“”，
selectedValue:'名称'，
选项：[
{
姓名：'姓名'，
值：“名称”，
},
{
姓名：'作者'，
值：“作者”，
},
{
名称：“ISBN”，
值：“isbn”，
}
]
}
更新搜索（e）{
this.setState（{search:e.target.value}）；
}
selectedValueHandler（e）{
this.setState（{selectedValue:e.target.value}）；
}
渲染（）{
如果（this.state.selectedValue==='name'）{
让filteredBooks=this.props.books.filter（book=>{
return book.name.toLowerCase（）.indexOf（this.state.search）！=-1；
})
}else if（this.state.selectedValue===='author'）{
让filteredBooks=this.props.books.filter（book=>{
return book.author.toLowerCase（）.indexOf（this.state.search）！=
-1;
})
}else if（this.state.selectedValue==='isbn'）{
让filteredBooks=this.props.books.filter（book=>{
returnbook.isbn.indexOf（this.state.search）！=-1；
})
}
返回(
{this.state.options.map（项=>(
{item.name}
))}

{filteredBooks.map（book=>{
返回
})}

)
}
};
导出默认书目；

当我实现这段代码时，我得到了一个错误：第69行：“filteredBooks”没有定义

试图将this.state.selectedValue替换为name，但也不起作用

---

有什么办法解决这个问题吗？

让

变量在局部范围内定位到最近的包装花括号。在if语句上方定义变量

render () {
  let filteredBooks;
  if (this.state.selectedValue === 'name') {
    filteredBooks = this.props.books.filter(book => {
      return book.name.toLowerCase().indexOf(this.state.search) !== -1;
    })
   ...

不相关，这里有一种缩短代码的方法：

const { books } = this.props;
const { search } = this.state;
const filteredBooks = books.filter(book =>
    book[search].toLowerCase().includes(search)
)

---

let

将变量的作用域局部限定为最近的环绕花括号。在if语句上方定义变量

render () {
  let filteredBooks;
  if (this.state.selectedValue === 'name') {
    filteredBooks = this.props.books.filter(book => {
      return book.name.toLowerCase().indexOf(this.state.search) !== -1;
    })
   ...

不相关，这里有一种缩短代码的方法：

const { books } = this.props;
const { search } = this.state;
const filteredBooks = books.filter(book =>
    book[search].toLowerCase().includes(search)
)

---

您尚未接受任何问题的答案（）-请确保单击“更正答案”旁边的空复选标记，以帮助其他人找到答案

filteredBooks

声明为

let

，因此在其

{}

块外不可见。要在

return

语句中访问它，您应该将

let filteredbook

放在

render

方法的顶部，并且只在那些

if

语句中分配给它（而不是重新声明）。（你也可以通过使用

var

而不是

let

来避免这个问题，但即使这样，上面的做法也更好。）你还没有接受任何问题的答案（）-确保单击正确答案旁边的空复选标记以帮助其他人找到答案

filteredbook

是用

let

声明的，因此在其

{}

块外不可见。要在

return

语句中访问它，您应该将

let filteredbook

放在

render

方法的顶部，并且只在那些

if

语句中分配给它（而不是重新声明）。（你也可以通过使用

var

而不是

let

来避免这个问题，但即使这样，上面的方法也是更好的做法。）非常感谢你提供的关于如何缩短我的代码的帮助和提示。现在一切都在运转，新事物也在学习；）非常感谢您提供有关如何缩短我的代码的帮助和提示。现在一切都在运转，新事物也在学习；）