Reactjs React中没有未使用的表达式

我正在React中编写一个包含搜索栏的代码。用户输入一个关键字，“我的代码”显示包含该关键字的所有结果。但是，我的代码不起作用，并且没有未使用的表达式错误

我有一个书籍数组，每当我的用户输入一个关键字时，一个在标题中包含该关键字的书籍列表就会显示出来。 此外，我希望我的输入栏在开始时有一个值，当页面加载时，它会查找具有keywoprd的书籍

这是我的密码：

import React from 'react';
import BooksContainer from './BooksContainer';


class BookList extends React.Component {
    constructor (props){
        super(props);

        this.state ={
            books: [
                {
{"title": "aaa" ,"description" : "abcdef" , "categories" : ["xyz"]},
{"title": "abc" , "description" : "abcdef" , "categories" : ["xyzr"]},
{"title": "abcd" , "description" : "abcdef" , "categories" : ["xyzrp"]}
                  }
            ],
            searchTerm :'harry potter',
            filterDisplay : []
             };


    }

    handleChange =(e) => 
    {
        this.setState ({searchTerm: e.target.value });
        let oldList = books.map(book => {
            return {
                book: book.title.toLowerCase(), book: book.categories.toLowerCase(), book: book.description.toLowerCase()
            };
        });

        if(searchTerm !== "")
        {
            let newList = oldList.filter(book => book.title.includes(this.state.searchTerm.toLowerCase()));
            this.setState ({filterDisplay: newList });
        }
    }


    render(){ 

        return(

            <div>

                <form onSubmit = {this.handleSearch}>
                    <h6>Search for the books</h6>
                    <input type = "text"  value = {this.state.searchTerm} onChange = {this.handleChange} />
                    <button type = "submit">Search</button>
                </form>

                    <BooksContainer books ={this.state.searchTerm.length < 1 ? this.state.books:this.state.filterDisplay} />

            </div>
        );
    }
}

export default BookList;

从“React”导入React；
从“./BooksContainer”导入BooksContainer；
类BookList扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
书籍：[
{
{“标题”：“aaa”，“描述”：“abcdef”，“类别”：[“xyz”]}，
{“标题”：“abc”，“描述”：“abcdef”，“类别”：[“xyzr”]}，
{“标题”：“abcd”，“说明”：“abcdef”，“类别”：[“xyzrp”]}
}
],
搜索词：'harry potter'，
过滤器显示：[]
};
}
handleChange=（e）=>
{
this.setState（{searchTerm:e.target.value}）；
让oldList=books.map（book=>{
返回{
book:book.title.toLowerCase（），book:book.categories.toLowerCase（），book:book.description.toLowerCase（）
};
});
如果（searchTerm！==“”）
{
让newList=oldList.filter（book=>book.title.includes（this.state.searchTerm.toLowerCase（））；
this.setState（{filterDisplay:newList}）；
}
}
render（）{
返回(
找书
搜寻
);
}
}
导出默认书目；

据我所知，“没有未使用的表达式”并不是代码无法工作的原因。它来自于eslint或其他linter，它只意味着声明代码中没有使用的东西，而不是一个破坏性的代码问题：

当然，您可以将此行添加到.eslintrc规则中：

rules: {
'no-unused-expression': 0,
}

从我看到的情况来看，你应该去掉你书籍数组中的{}行——第11行和第15行。 在第29行，您尝试返回相同的密钥名3次：

book: book.title.toLowerCase(), book: book.categories.toLowerCase(), book: book.description.toLowerCase()

这第一本“书”只是一把钥匙，你不应该用三把相同的钥匙。例如，这种方式很好：

book: [book.title.toLowerCase(), book.categories.toLowerCase(), book.description.toLowerCase()]

letoldList应替换为constoldList

letnewList也一样，应该替换为const