使用 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

如何使用 React Hooks 在另一个组件中获取表单的输入值

React hooks解决搜索时序问题(竞态)

如何使用 React-Hooks 和 Apollo Client 在 React-GraphQL 中实现搜索功能?

从 React Hooks 看 React 的本质

如何在 React with Typescript 中使用和指定通用 Hooks?