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

Question

我想重新加载 objects 的数组并使其根据搜索输入值显示。

例如，有一个搜索输入和一个评论列表（标题 + 评论）。

当用户在搜索输入中键入“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;

Answer 1

对于 title 属性.

中包含 searchTerm 值的评论，您可以在映射 newerSorted 数组之前进行右内联过滤

{newerSorted.filter(({ title }) => title.toLowerCase().includes(searchTerm.toLoweCase()))
  .map(({ id, title, comment, score }) => (
    <Review key={id} title={title} comment={comment} score={score} />
  ))
}

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

Reload an array of objects depending on search input value using React Hooks

javascript

reloaddata

reactjs

react-hooks