React多字段搜索筛选问题：如何同时按name、dob、gender过滤数据

• 你当前代码中给三个搜索变量keyword、gender_search、dob_search都赋值为同一个输入框的值，三者完全相等没有意义
• 筛选逻辑里连续写了三个return，JavaScript执行到第一个return就会终止函数运行，后面的性别、出生日期筛选逻辑永远不会执行
• 连续调用三次setName，属于完全冗余的无效操作

以下是修改后的完整App.js代码：

import React, { useState } from 'react';
import './App.css';

// Star Wars Data 
const CHAR = [
  { id: 1, name: 'Luke Skywalker', dob: '19BBY', gender: 'Male' },
  { id: 2, name: 'C-3PO', dob: '112BY', gender: 'Droid'},
  { id: 3, name: 'R2-D2', dob: '33BBY', gender: 'Droid'},
  { id: 4, name: 'Darth Vader', dob: '41.9BBY', gender: 'Male'},
  { id: 5, name: 'Leia Organa', dob: '19BBY', gender: 'Female'},
  { id: 6, name: 'Obi-Wan Kenobi', dob: '57BBY', gender: 'Male'},
  { id: 7, name: 'Anakin Skywalker', dob: '41.9BBY', gender: 'Male'},
  { id: 8, name: 'Chewbacca', dob: '200BBY', gender: 'Wookie'},
  { id: 9, name: 'Han Solo', dob: '29BBY', gender: 'Male'}
];

function App() {
  const [searchKey, setSearchKey] = useState('');
  const [foundCHAR, setFoundCHAR] = useState(CHAR);

  const filter = (e) => {
    const keyword = e.target.value.toLowerCase();
    setSearchKey(keyword);

    if (keyword !== '') {
      const results = CHAR.filter((user) => {
        // 三个字段任意一个匹配就返回该条数据
        return user.name.toLowerCase().includes(keyword)
          || user.gender.toLowerCase().includes(keyword)
          || user.dob.toLowerCase().includes(keyword);
      });
      setFoundCHAR(results);
    } else {
      setFoundCHAR(CHAR);
    }
  };

  return (
    <div className="container">
    <h1>React 搜索筛选星球大战数据</h1>
      <input
        type="search"
        value={searchKey}
        onChange={filter}
        className="input"
        placeholder="输入姓名、性别或出生日期筛选"
      />
      <div className="user-list">
        {foundCHAR && foundCHAR.length > 0 ? (
          foundCHAR.map((user) => (
            <li key={user.id} className="user">
            <table className="table table-sm table-dark">
            <thead>
            <tr>
            <th scope="col"># {user.id}</th>
            <th scope="col">姓名</th>
            <th scope="col">出生日期</th>
            <th scope="col">性别</th>            
            </tr>
            </thead>
            <tbody>
            <tr>
            <th scope="row" className="user-id"></th>
            <td className="user-name">{user.name}</td>
            <td className="user-age">{user.dob}</td>
            <td className="user-gender">{user.gender}</td>
            </tr>
            </tbody>
            </table>
            </li>
          ))
        ) : (
          <h1>未找到匹配结果！</h1>
        )}
      </div>
    </div>
  );
}

export default App; 

• 将状态变量名从name改为更通用的searchKey，符合多字段搜索的语义
• 筛选逻辑改为用||逻辑或连接三个字段的匹配规则，任意一个字段匹配就保留该条数据
• 把startsWith改成includes，支持模糊匹配，不需要用户从字段开头输入才能匹配
• 修复了table内错误使用<th>展示内容的问题，改为用<td>展示单元格内容

如果需要实现三个独立输入框分别筛选姓名、性别、出生日期，只需要新增对应的状态变量，在筛选逻辑里用&&逻辑与连接三个匹配规则即可。

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