使用 React Hooks 根据搜索输入值重新加载对象数组

Posted 2023-02-27

【中文标题】使用 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 />
  ))

【讨论】：

非常感谢您的帮助！！！ :) 我需要再次练习使用过滤器！！！