Next.js中如何通过Header组件更新Table组件数据？

核心是将搜索状态提升到父组件TablePage，通过Props实现兄弟组件（Header和Table）之间的通信，具体修改如下：

1. 修改父组件 TablePage #

把搜索关键词的状态管理和数据筛选逻辑移到父组件，统一控制并分发给子组件：

import Header from '@/components/header/header.js';
import Table from '@/components/table/table.js';
import data from '@/youtube_data.json';
import { useState } from 'react';

export default function TablePage() {
  // 管理搜索关键词状态
  const [searchQuery, setSearchQuery] = useState('');

  // 根据关键词筛选数据
  const filteredData = searchQuery 
    ? data.filter(item => item.title.toLowerCase().includes(searchQuery.toLowerCase()))
    : data;

  return (
    <div>
      {/* 将更新关键词的方法传给Header */}
      <Header onSearch={setSearchQuery} />
      <main>
        {/* 将筛选后的数据传给Table */}
        <Table data={filteredData} />
      </main>
    </div>
  )
}

2. 修改 Header 组件 #

移除不必要的路由跳转，调用父组件传递的方法更新搜索关键词：

import styles from './header.module.css';

function search(e, onSearch) {
  e.preventDefault();
  const string = e.target.querySelector('input').value.trim();
  // 调用父组件的方法更新搜索关键词
  onSearch(string);
}

export default function Header ({ onSearch }) {
  return (
    <header className={styles.header}>
      <div className={styles.search}>
        <form onSubmit={(e) => {search(e, onSearch)}}>
          <button type='submit'></button>
          <input type='search' placeholder='Type song or artist name'/>
        </form>
      </div>
    </header>
  )
}

3. 修改 Table 组件 #

简化组件逻辑，直接使用父组件传递的筛选后数据：

import styles from './table.module.css';

export default function Table({ data }) {
  return (
    <div className={styles.table}>
      <table>
        <thead>
          <tr>
            <th>
              Title
            </th>         
          </tr>
        </thead>
        <tbody>
            {data.map(item =>
              <tr key={item.id}>
                <td>
                   {item.title}              
                </td>
              </tr>
            )}
        </tbody>
      </table>
    </div>
  );
}

补充说明 #

• 筛选逻辑中使用toLowerCase()实现大小写不敏感搜索，比match()更稳妥（避免正则语法问题）
• 移除了原Table组件中无依赖的useEffect（会导致无限渲染），现在数据直接由父组件传递，无需内部初始化

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