在React中過濾本地呈現的JSON表

我的 React 應用程式中有一個頁面，它將一些本地存盤的 JSON 資料呈現到一個表中。我一直在嘗試實作一個搜索欄，該搜索欄將過濾表中的 PostCode 列并回傳該行。到目前為止，我已經能夠制作一個搜索欄來做我想做的事情，但我無法將它集成到帶有表格的頁面中。

如果這是一個簡單的問題，或者我離題了，我深表歉意。我是一名編碼新手，但必須在專案中使用 React 并且很難掌握它。

我的表的代碼如下所示：

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>
);
}

uj5u.com熱心網友回復：

您可以使用useMemo鉤子來實作此功能。

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

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

您可以使用searchResults變數并將其呈現在您的表格中。

uj5u.com熱心網友回復：

在同一個 JsonReader 函式中，您應該：

1. 創建 useState 常量[searchTerm, setSearchTerm]。

2. 使用過濾后的資料設定一個新的FData陣列，這就是您應該映射到的陣列。

3. 將輸入欄位放在同一頁面上。

4. 而且，您將使用FData.map而不是使用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>
        );
        })}
    </>
    );
};

標籤：节点.js 反应 json 反应式 筛选

上一篇：在平面串列內容上反應本機導航標題

下一篇：iNeuOS工業互聯網作業系統，資料點、設備和業務的計算與預警