React中本地渲染JSON表格的邮政编码列筛选搜索栏集成问题

Hey there! No need to apologize at all—React's state management can feel tricky when you're just starting out, and this is a super common scenario. Let's break down how to get your search bar working seamlessly with the table.

The core issue right now is that your SearchBar and JsonReader components are handling data independently: your search bar filters data and renders its own minimal results, while the table keeps showing all original data. We need to share the search state between them so the table can use the filtered dataset.

Here's how to fix this step by step:

Step 1: Lift the search state to the parent component (JsonReader) #

We'll let JsonReader manage the search term state, since it's the component that renders the table. This way, both the search bar and table can access and react to the same state.

Update your JsonReader component like this:

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

export const JsonReader = () => {
  // Track the search term in the parent component
  const [searchTerm, setSearchTerm] = useState('');

  // Filter data based on the current search term
  const filteredData = Data.filter((item) => {
    if (!searchTerm) return true; // Show all data when search is empty
    return item.PostCode.toLowerCase().includes(searchTerm.toLowerCase());
  });

  return (
    <>
      <ArchiveHeader />
      {/* Pass state setter to SearchBar so it can update the search term */}
      <SearchBar onSearchChange={setSearchTerm} searchTerm={searchTerm} />
      <div className="data-container">Welcome to RF</div>
      {/* Render only filtered data in the table */}
      {filteredData.map((data, key) => {
        return (
          <div key={key}>
            <JsonTable
              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>
      <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;

Step 2: Update SearchBar to use the parent state #

Instead of managing its own state, the search bar will now rely on the parent component's state and state setter. We'll remove the local state here and bind the input to the parent's values.

import React from 'react';

export default function SearchBar ({ onSearchChange, searchTerm }) {
  return (
    <div className="SearchBar">
      <input 
        type="text" 
        placeholder="Search postcode..." 
        value={searchTerm} // Sync input value with parent state
        onChange={(e) => onSearchChange(e.target.value)} 
      />
    </div>
  );
}

Key changes explained: #

• Lifted state up: We moved the searchTerm state to JsonReader—this is a fundamental React pattern for sharing state between components that need to react to the same data.
• Filtered data: The filteredData variable dynamically narrows down the original dataset based on the search term.
• Connected components: The SearchBar now uses the parent's setSearchTerm function to update the search state, which triggers the table to re-render with only matching rows.
• Removed redundant rendering: We stripped out the search bar's own data display, since the table now handles showing filtered results.

Now when you type in the search bar, the table will automatically update to show only rows where the postcode matches your input!

内容的提问来源于stack exchange，提问作者joeskirkowski