重构筛选器和映射成搜索栏的部分

huangapple
go评论103阅读模式
英文:

Refactoring Filter and Map into sections for search bar

问题

Sure, here's the translated code portion:

  1. return (
  2.   <div>
  3.     <input placeholder="搜索图书标题" onChange={handleChange} />
  4.     {
  5.       bookList.filter(book => {
  6.         let isMatched = (book.title.toLowerCase().includes(query.toLowerCase()));
  8.         if (query === '') {
  9.           return ;
  10.         } else if (isMatched) {
  11.           return book;
  12.         }
  13.       }).map((book, index) => (
  14.         <div>			
  15.           这是这本书
  16.         </div>
  17.       ))
  18.     }
  19.   </div>
  20. );
  21. };

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.

  1. return (
  2. &lt;div&gt;
  3. &lt;input placeholder=&quot;Search Book Title&quot; onChange={handleChange} /&gt;
  4.     	{
  5.     	bookList.filter(book =&gt; {
  6.     		let isMatched = (book.title.toLowerCase().includes(query.toLowerCase()));
  7.     
  8.     		if (query === &#39;&#39;) {
  9.     			return ;
  10.     		} else if (isMatched) {
  11.     			return book;
  12.     		}
  13.     	}).map((book, index) =&gt; (
  14.     		&lt;div&gt;			
  15.     		This is the book   
  16.     		&lt;/div&gt;
  17.     	))
  18.     	}
  19.     &lt;/div&gt;
  20. )
  21. };

I was getting errors when separating out the filter and map function.

答案1

得分: 0

请注意，您的代码部分无需翻译，以下是翻译好的部分：

做过滤器并将结果赋给一个变量。检查.length是否为零，如果是，则返回您的“未找到书籍”标记。否则返回找到的书籍列表。例如

  1. function getFilteredBooks() {
  2.   let filteredBooks = bookList.filter(book => 
  3.     book.title.toLowerCase().includes(query.toLowerCase())
  4.   );
  6.   if (filteredBooks.length === 0) {
  7.     return (<div>未找到书籍</div>);
  8.   } else {
  9.     return books.map(book => <div>{{book.title}}</div>);
  10.   }
  11. }
  13. // ... 其他代码
  15. 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

  1. function getFilteredBooks() {
  2.   let filteredBooks = bookList.filter(book =&gt; 
  3.     book.title.toLowerCase().includes(query.toLowerCase())
  4.   );
  6.   if (filteredBooks.length === 0) {
  7.     return (&lt;div&gt;No books&lt;/div&gt;);
  8.   } else {
  9.     return books.map(book =&gt; &lt;div&gt;{{book.title}}&lt;/div&gt;);
  10.   }
  11. }
  13. // ... other code
  15. return (&lt;div&gt; &lt;input placeholder=&quot;Search Book Title&quot; onChange={handleChange} /&gt;{{getFilteredBooks()}}&lt;/div&gt;)

答案2

得分: 0

I would recommend assigning the result of the filtered books to a variable and then use it in your rendered result -

  1. const filteredBooks = bookList.filter(book => {
  2.   return query !== ""
  3.     && book.title.toLowerCase().includes(query.toLowerCase());
  4. })
  5.       
  6. return (
  7.   <div>
  8.     <input placeholder="Search Book Title" onChange={handleChange} />
  9.     {filteredBooks.length === 0
  10.       ? <p>No matching books</p>
  11.       : filteredBooks.map((book, index) => (
  12.           <div key={index}>           
  13.             This is the book
  14.           </div>
  15.         ))
  16.     }
  17.   </div>
  18. )

If the filter is an expensive computation, you should useMemo -

  1. const filteredBooks = useMemo(() => (
  2.   bookList.filter(book => (
  3.     query !== ""
  4.       && book.title.toLowerCase().includes(query.toLowerCase())
  5.       && someExpensiveCondition(query) // <-
  6.   ))
  7. ), [bookList, query])
英文:

I would recommend assigning the result of the filtered books to a variable and then use it in your rendered result -

  1. const filteredBooks = bookList.filter(book =&gt; {
  2.   return query != &quot;&quot;
  3.     &amp;&amp; book.title.toLowerCase.includes(query.toLowerCase())
  4. })
  5.       
  6. return (
  7.   &lt;div&gt;
  8.     &lt;input placeholder=&quot;Search Book Title&quot; onChange={handleChange} /&gt;
  9.     { filteredBooks.length == 0
  10.     ? &lt;p&gt;No matching books&lt;/p&gt;
  11.     : filteredBook.map((book, index) =&gt; (
  12.         &lt;div key={index}&gt;           
  13.           This is the book   
  14.         &lt;/div&gt;
  15.       ))
  16.     }
  17.   &lt;/div&gt;
  18. )

If the filter is an expensive computation, you should useMemo -

  1. const filteredBooks = useMemo(() =&gt; (
  2.   bookList.filter(book =&gt; (
  3.     query != &quot;&quot;
  4.       &amp;&amp; book.title.toLowerCase.includes(query.toLowerCase())
  5.       &amp;&amp; someExpensiveCondition(query) // &lt;-
  6.   ))
  7. ), [bookList, query])

huangapple
  • 本文由 发表于 2023年4月20日 02:41:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76057859.html
  • ecmascript-6
  • filter
  • javascript
  • reactjs
  • search

在Nunjucks模板中访问数组在 :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定