点击按钮后数组未按预期过滤，请求解析filter方法失效原因

我来帮你排查下问题哈，你的filter方法没按预期工作主要有这几个核心原因：

• filter的结果没被保存：filter是纯函数，它不会修改原数组，而是返回一个全新的过滤后数组。但你现在只是调用了searchArray.filter(...)，却完全没把这个新数组存起来，原数组根本没变化，UI当然不会更新。
• 没有用状态管理过滤结果：你直接把data赋值给searchArray，这只是个普通变量，就算你修改它（其实你也没改），React也不会触发组件重新渲染。必须用React的状态来保存过滤后的结果，这样状态变化时UI才会跟着更新。
• searchUser函数没做实际的更新操作：你在useEffect和点击按钮时都调用了searchUser，但这个函数里除了调用filter啥也没干，等于白跑一趟。

修复后的完整代码 #

import { useState, useEffect } from 'react';
import Users from './Users'; // 假设你的Users组件在这个路径
import useDataFetcher from './useDataFetcher'; // 假设你的自定义hook在这个路径

export default function App() { 
  const { data } = useDataFetcher(); 
  const [inputField, setInputField] = useState(""); 
  // 新增状态保存过滤后的用户列表
  const [filteredUsers, setFilteredUsers] = useState([]);

  // 初始化或data更新时，把全部用户存进去
  useEffect(() => {
    if (data) {
      setFilteredUsers(data);
    }
  }, [data]);

  const searchUser = () => { 
    if (!data) return; // 处理data还没加载的情况
    // 把filter的结果存到状态里，同时做大小写不敏感匹配
    const result = data.filter((el) => 
      el.firstName.toLowerCase().includes(inputField.toLowerCase())
    );
    setFilteredUsers(result);
  }; 

  // input变化时自动触发搜索
  useEffect(() => { 
    searchUser(); 
  }, [inputField, data]); // 加上data依赖，防止data未加载时出错

  return ( 
    <div className="App"> 
      <h1>Xaxis Frontend Interview</h1> 
      <input 
        onChange={(e) => setInputField(e.target.value)} 
        placeholder="输入名字搜索"
      /> 
      <button onClick={searchUser}> Search </button> 
      {/* 渲染过滤后的数组 */}
      {filteredUsers.map((userData, i) => ( 
        <Users 
          key={userData.id || i} // 尽量用用户唯一id当key，不要只用索引
          firstName={userData.firstName} 
          lastName={userData.lastName} 
          email={userData.email} 
          bio={userData.bio} 
        /> 
      ))} 
    </div> 
  ); 
}

额外优化点 #

• 加了大小写不敏感的搜索逻辑，用户输入大写小写都能匹配到，体验更友好
• 增加了对data为空的判断，避免组件初始化时出现报错
• 建议用用户的唯一id作为map的key，而不是索引，这样React渲染列表时性能更优
• 给input加了placeholder，提升用户体验

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