在React中搜索/过滤表:用空字符串替换空值

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

// Table组件
const Table = () => {
  const data = useSelector(state => state.data); // 从状态管理库中获取表格数据
  const keyword = useSelector(state => state.keyword); // 从状态管理库中获取搜索关键字

  // 过滤函数
  const filterData = () => {
    return data.filter(item => item.includes(keyword));
  };

  return (
    <div>
      <input type="text" onChange={e => dispatch({ type: 'SET_KEYWORD', keyword: e.target.value })} />
      <table>
        <thead>
          <tr>
            <th>表头1</th>
            <th>表头2</th>
          </tr>
        </thead>
        <tbody>
          {filterData().map(item => (
            <tr key={item}>
              <td>{item}</td>
              <td>{item}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// SearchBox组件
const SearchBox = () => {
  const dispatch = useDispatch();

  return (
    <input type="text" onChange={e => dispatch({ type: 'SET_KEYWORD', keyword: e.target.value })} />
  );
};

// 应用程序组件
const App = () => {
  return (
    <div>
      <SearchBox />
      <Table />
    </div>
  );
};

export default App;