React组件中如何根据输入邮箱过滤并展示JSON数据？

嘿，你已经把核心的过滤功能实现了，现在只需要调整一下数据渲染的部分就搞定啦！我给你一步步说怎么改：

1. 先修正state的初始值 #

你的filteredData初始设成了字符串""，但过滤结果是数组，改成空数组[]更合理，避免渲染时因为类型不匹配出问题：

state = { data: [], value: "", filteredData: [] };

2. 优化提交逻辑（可选但推荐） #

你现在每次提交都重新fetch数据，但其实componentDidMount已经把数据存在state.data里了，直接用这个就行，不用重复请求接口，节省资源：

handleSubmit(e) {
  e.preventDefault();
  const email = this.state.value.trim(); // 去掉前后空格，避免无效输入
  if (!email) return; // 如果输入为空，直接返回，不执行过滤

  // 直接用已有的state.data进行过滤，不用重新fetch
  const result = this.state.data.filter(person => person.email === email);
  this.setState({ filteredData: result });
}

3. 调整渲染逻辑，优先展示过滤结果 #

原来的代码一直渲染全部数据，现在我们要加个判断：

• 如果filteredData里有数据，就渲染过滤后的结果
• 如果没有过滤结果，但用户已经输入了邮箱，就显示“没有匹配结果”的提示
• 如果用户还没输入，就继续展示全部数据

修改后的渲染代码：

<ul>
  {/* 优先展示过滤后的结果 */}
  {this.state.filteredData.length > 0 ? (
    this.state.filteredData.map(person => (
      <div className="result" key={person.email}>
        <h3 className="heading-tertiary"> {person.name}, &nbsp;{person.age} </h3>
        <p className="paragraph--result">{person.notes}</p>
      </div>
    ))
  ) : this.state.value ? (
    {/* 用户输入了邮箱但没匹配到结果 */}
    <li className="no-result">没有找到匹配该邮箱的用户</li>
  ) : (
    {/* 用户没输入时展示全部数据 */}
    this.state.data.map(person => (
      <div className="result" key={person.email}>
        <h3 className="heading-tertiary"> {person.name}, &nbsp;{person.age} </h3>
        <p className="paragraph--result">{person.notes}</p>
      </div>
    ))
  )}
</ul>

这样改完之后，用户点击提交后，页面就会自动切换成匹配邮箱的结果啦，如果没匹配到还会有友好提示，体验更好～

内容的提问来源于stack exchange，提问作者Cesar Corrales Rojas