英文:
Refactoring Filter and Map into sections for search bar
问题
Sure, here's the translated code portion:
return (
<div>
<input placeholder="搜索图书标题" onChange={handleChange} />
{
bookList.filter(book => {
let isMatched = (book.title.toLowerCase().includes(query.toLowerCase()));
if (query === '') {
return ;
} else if (isMatched) {
return book;
}
}).map((book, index) => (
<div>
这是这本书
</div>
))
}
</div>
);
};
Please note that the translation doesn't change the code's functionality, only the comments and placeholder text have been translated.
英文:
I have a search bar component. I would like to know how I can refactor the below code such that I can include html markup to display if there is no match. Right now the markup displays if there is a match or nothing displays if its blank.
I was getting errors when separating out the filter and map function.
return (
<div>
<input placeholder="Search Book Title" onChange={handleChange} />
{
bookList.filter(book => {
let isMatched = (book.title.toLowerCase().includes(query.toLowerCase()));
if (query === '') {
return ;
} else if (isMatched) {
return book;
}
}).map((book, index) => (
<div>
This is the book
</div>
))
}
</div>
)
};
I was getting errors when separating out the filter and map function.
答案1
得分: 0
请注意，您的代码部分无需翻译，以下是翻译好的部分：
做过滤器并将结果赋给一个变量。检查.length是否为零，如果是，则返回您的“未找到书籍”标记。否则返回找到的书籍列表。例如
function getFilteredBooks() {
let filteredBooks = bookList.filter(book =>
book.title.toLowerCase().includes(query.toLowerCase())
);
if (filteredBooks.length === 0) {
return (<div>未找到书籍</div>);
} else {
return books.map(book => <div>{{book.title}}</div>);
}
}
// ... 其他代码
return (<div> <input placeholder="搜索书名" onChange={handleChange} />{getFilteredBooks()}</div>)
英文:
Do the filter first and assign the result to a variable. Check if the .length is zero, if it is return your no books found markup. Otherwise return your books that were found list. For example
function getFilteredBooks() {
let filteredBooks = bookList.filter(book =>
book.title.toLowerCase().includes(query.toLowerCase())
);
if (filteredBooks.length === 0) {
return (<div>No books</div>);
} else {
return books.map(book => <div>{{book.title}}</div>);
}
}
// ... other code
return (<div> <input placeholder="Search Book Title" onChange={handleChange} />{{getFilteredBooks()}}</div>)
答案2
得分: 0
I would recommend assigning the result of the filtered books to a variable and then use it in your rendered result -
const filteredBooks = bookList.filter(book => {
return query !== ""
&& book.title.toLowerCase().includes(query.toLowerCase());
})
return (
<div>
<input placeholder="Search Book Title" onChange={handleChange} />
{filteredBooks.length === 0
? <p>No matching books</p>
: filteredBooks.map((book, index) => (
<div key={index}>
This is the book
</div>
))
}
</div>
)
If the filter is an expensive computation, you should useMemo -
const filteredBooks = useMemo(() => (
bookList.filter(book => (
query !== ""
&& book.title.toLowerCase().includes(query.toLowerCase())
&& someExpensiveCondition(query) // <-
))
), [bookList, query])
英文:
I would recommend assigning the result of the filtered books to a variable and then use it in your rendered result -
const filteredBooks = bookList.filter(book => {
return query != ""
&& book.title.toLowerCase.includes(query.toLowerCase())
})
return (
<div>
<input placeholder="Search Book Title" onChange={handleChange} />
{ filteredBooks.length == 0
? <p>No matching books</p>
: filteredBook.map((book, index) => (
<div key={index}>
This is the book
</div>
))
}
</div>
)
If the filter is an expensive computation, you should useMemo -
const filteredBooks = useMemo(() => (
bookList.filter(book => (
query != ""
&& book.title.toLowerCase.includes(query.toLowerCase())
&& someExpensiveCondition(query) // <-
))
), [bookList, query])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论