在 React 中过滤本地呈现的 JSON table

Question

我的 React 应用程序中有一个页面将一些本地存储的 JSON 数据呈现为 table。我已经尝试了很长时间来实现一个搜索栏，该搜索栏将过滤 table 和 return 行中的 PostCode 列。到目前为止，我已经能够制作一个搜索栏来执行我想要的操作，但我无法将它集成到带有 table.

的页面中

如果这是一个简单的问题或者我跑题了，我深表歉意。我是一名编码新手，但必须在项目中使用 React 并努力掌握它。

我的 table 的代码如下所示：


import SearchBar from './SearchBar'
import React,{useState,useEffect} from 'react';
import './App.css';
import { Data } from './NewData.js'

export const JsonReader = () => {
  return (
    <>
    
    <ArchiveHeader />

      <div className="data-container">Welcome to RF</div>
        {Data.map((data, key) => {
          return (
            <div key={key}>
            <JsonTable
            key = {key}
            Username = {data.Username}
            Address = {data.Address}
            PostCode = {data.PostCode}
            Details ={data.Details}
            Date ={data.Date}
            Score ={data.Score}
             />
             </div>
          );
        })}
    </>
  );
};

const ArchiveHeader = () => {
  return (
    <header className="ArchiveHeader">
      <h2>Rent Flag</h2>
    </header>
  );
};

const JsonTable= ({ Username, Address, PostCode, Details, Date, Score }) => {
  if (!Username) return <div />;
  return (
    <table data={Data}>
      <tbody>
        <tr>
          <td>
            <h5>{Username}</h5>
          </td>
          <td>
            <h5>{Address}</h5>
          </td>
          <td>
            <h4>{PostCode}</h4>
          </td>
          <td>
            <p>{Details}</p>
          </td>
          <td>
            <p>{Date}</p>
          </td>
          <td>
            <p>{Score}</p>
          </td>
        </tr>
      </tbody>
    </table>
  );
};
export default JsonReader;

我的搜索栏代码如下所示：

import Papa from "papaparse";
import React, { useState, useEffect } from 'react';
import { Data } from './NewData.js'
import JsonReader from './JsonReader'

export default function SearchBar () {
const [searchTerm,setSearchTerm] = useState('')
return (
  <div className="SearchBar">
    <input type="text" placeholder="search..." onChange={e=>setSearchTerm(e.target.value)} />
    {Data.filter((val)=>{
      if(searchTerm == ""){
        return val
      }
      else if(val.PostCode.toLowerCase().includes(searchTerm.toLowerCase())){
        return val;
      }
    }).map((val,key)=>{
      return <div>{val.PostCode} </div>
    })}
  </div>
);
}

Answer 1

您可以使用 useMemo 钩子实现此功能。

const searchResults = useMemo(() => {
  if (!searchTerm) {
    return items;
  }

  return Data?.filter((item) =>
    item?.toLowerCase()?.includes(searchTerm?.toLowerCase().trim())
  );
}, [Data, searchTerm]);

您可以使用 searchResults 变量并在 table 中呈现它。

Answer 2

在同一个 JsonReader 函数中，您应该：

创建 useState 常量 [searchTerm, setSearchTerm]。
设置一个包含过滤数据的新 FData 数组，这就是您应该映射到的数组。
将输入字段放在同一页上。
并且，您将使用 FData.map[=35= 而不是 Data.map ].

这就是您的 JsonReader 函数的样子 （并且可以丢弃 SearchBar 函数）:

export const JsonReader = () => { const [searchTerm, setSearchTerm] = useState(""); const FData = Data.filter((val) => { if (searchTerm == "") { return val; } else if (val.PostCode.toLowerCase().includes(searchTerm.toLowerCase())) { return val; } }); return ( <> <ArchiveHeader /> <div className="data-container">Welcome to RF</div> <input type="text" placeholder="search..." onChange={(e) => setSearchTerm(e.target.value)} /> {FData.map((data, key) => { return ( <div key={key}> <JsonTable key = {key} Username = {data.Username} Address = {data.Address} PostCode = {data.PostCode} Details ={data.Details} Date ={data.Date} Score ={data.Score} /> </div> ); })} </> ); };

在 React 中过滤本地呈现的 JSON table

Filtering locally rendered JSON table in React

json

filter

node.js

reactjs

react-native