使用選擇選項反應搜索過濾器

Question

我已經在我的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;

當我實現此代碼時，我得到了錯誤：69行：未定義'filteredBooks'no-undef。

試圖放置this.state.selectedValue而不是name，但是它也不起作用。

任何想法如何解決問題？

Answer 1

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)
)