使用 React Hooks 根据搜索输入值重新加载对象数组
Posted
技术标签:
【中文标题】使用 React Hooks 根据搜索输入值重新加载对象数组【英文标题】:Reload an array of objects depending on search input value using React Hooks 【发布时间】:2021-11-18 06:04:14 【问题描述】:我想重新加载一个对象数组并使其根据搜索输入值出现。
例如,有一个搜索输入和一个评论列表(标题 + 评论)。
当用户在搜索输入中键入“a”时,将重新加载列表并为您提供标题中包含“a”的列表。并且标题中不包含“a”的项目将不会出现。
当用户在搜索输入中键入“ab”时,将重新加载列表并为您提供标题中包含“ab”的列表。并且标题中不包含“ab”的项目不会出现。
您可以在这里查看我当前的迷你项目:https://distracted-golick-f00481.netlify.app/
您可以添加评论列表,并将其保存到本地存储中。该列表将按字母顺序和更高的排名进行排序。
===========
Reviews.js(包括评论列表)
import React, useState from "react";
import Header from "./Header";
import Review from "./Review";
import Input from "./Input";
const Reviews = ( books, initialData ) =>
const combinedBooks = initialData.concat(books);
const [myBooks, setMyBooks] = useState(combinedBooks);
const [searchTerm, setSearchTerm] = useState("");
// sort by rank
let sorted = combinedBooks.sort((a, b) =>
return b.score - a.score;
);
// sort by alphabetical order
let newSorted = sorted.sort(function (a, b)
let fa = a.title.toLowerCase(),
fb = b.title.toLowerCase();
if (fa < fb)
return -1;
if (fa > fb)
return 1;
return 0;
);
// sort by rank then alphabetically
let newerSorted = [...newSorted].sort((a, b) =>
return b.score - a.score;
);
// Reload the data based on the search input value.. BUT How?
return (
<section style= border: "3px solid green" >
<Header title="Book Review Lists" />
/* search input to find the book review by title */
<form>
<Input
smallTitle=""
placeholder="find the review by title"
value=searchTerm
onChange=(e) => setSearchTerm(e.target.value)
/>
</form>
<h1>searchTerm</h1>
newerSorted.map((review) =>
const id, title, comment, score = review;
return (
<Review key=id title=title comment=comment score=score />
);
)
</section>
);
;
export default Reviews;
【问题讨论】:
【参考方案1】:您可以在映射newerSorted
数组之前直接内联过滤,以查找在其title
属性中包含searchTerm
值的评论。
newerSorted.filter(( title ) => title.toLowerCase().includes(searchTerm.toLoweCase()))
.map(( id, title, comment, score ) => (
<Review key=id title=title comment=comment score=score />
))
【讨论】:
非常感谢您的帮助!!! :) 我需要再次练习使用过滤器!!!以上是关于使用 React Hooks 根据搜索输入值重新加载对象数组的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 React Hooks 在另一个组件中获取表单的输入值