在ReactJs中如何对Fetch API获取的员工数据按名称筛选后渲染

你的现有代码直接全量渲染了接口返回的所有员工数据，只需要在map渲染前增加筛选逻辑即可。

修改点说明 #

1. 对员工数组做过滤，判断姓名字段employee_name是否包含字母A，可按需选择是否忽略大小写
2. 给列表渲染项添加key属性，避免React抛出列表渲染警告
3. 可选联动现有输入框实现自定义关键词搜索，默认保留含A的结果

完整可运行代码 #

import React, { useState, useEffect } from "react";

export default function App() {
  const [data, setData] = useState([]);
  const [input, setInput] = useState("");

  useEffect(() => {
    fetch("https://dummy.restapiexample.com/api/v1/employees")
      .then((response) => response.json())
      .then((result) => setData(result.data));
  }, []);

  // 筛选逻辑：无输入时默认保留含A的记录，有输入时匹配用户输入的关键词（忽略大小写）
  const filteredList = data.filter(emp => {
    const matchKey = input || 'A';
    return emp.employee_name.toLowerCase().includes(matchKey.toLowerCase());
  });

  const renderList = filteredList.map(emp => (
    <div key={emp.id}>{emp.employee_name}</div>
  ));

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div className="App">
      <form>
        输入搜索内容：
        <input type="text" onChange={handleChange} value={input} />
      </form>
      <div className="suggestions-div">{renderList}</div>
    </div>
  );
}

如果不需要自定义搜索功能，只需要固定展示姓名含A的员工，直接删除输入框相关逻辑，把筛选条件写死即可：

const filteredList = data.filter(emp => emp.employee_name.includes('A'));

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