React中输入API不存在的名称时显示“No Data Found”的问题排查与解决

嘿，我知道你为啥遇到这个问题啦！你原来的写法里，filter方法会自动把返回null的项过滤掉，所以map里根本碰不到null的情况，那"No Data Found"自然就不会显示出来咯。

解决方案思路 #

我们需要先把过滤后的结果单独存为一个变量，然后根据这个变量的长度来决定是渲染数据卡片还是显示无数据提示，这样逻辑更清晰也能解决问题。

修改后的完整代码 #

import React, { useState, useEffect } from "react"; 
import "../css/body.css"; 
import Home from "./Home.jsx"; 

const Body = (props) => { 
  const [user, setUser] = useState([]); 
  const [loading, setLoading] = useState(false); 

  useEffect(() => { 
    setLoading(true) 
    fetch("https://randomuser.me/api/?results=15") 
      .then((res) => res.json()) 
      .then((data) => { 
        setUser(data.results); 
        setLoading(false); 
      }) 
      .catch((error) => { 
        console.log(error); 
        setLoading(false); // 出错也要把loading关掉哦
      }); 
  }, []); 

  // 先计算过滤后的用户列表
  const filteredUsers = user.filter((value) => {
    const fullName = `${value.name.first} ${value.name.last}`;
    // 如果搜索框为空，返回所有用户；否则匹配全名
    if (props.searching === "") return true;
    return fullName.toLowerCase().includes(props.searching.toLowerCase());
  });

  return ( 
    <> 
      { loading ? (
        <Home/>
      ) : ( 
        <div className="main"> 
          {/* 判断过滤后的列表是否为空 */}
          {filteredUsers.length === 0 ? (
            <h1>NO Data Found</h1>
          ) : (
            filteredUsers.map((data, index) => ( 
              <div className="card" key={index} > 
                <div className="card__body"> 
                  <div className="picture"> 
                    <img src={data.picture.large} alt={`${data.name.first} ${data.name.last}`} /> 
                  </div> 
                  <span>{data.nat}</span> 
                  <div className="p"> 
                    <h3 className="card__title"> 
                      {`${data.name.title}. ${data.name.first} ${data.name.last} | ${data.dob.age}`} 
                    </h3> 
                    <h4 className="card__email">{data.email}</h4> 
                    <p className="card__text"> 
                      {`${data.location.street.number} ${data.location.street.name}, ${data.location.city}, ${data.location.state}, ${data.location.country}, ${data.location.postcode}`} 
                    </p> 
                  </div> 
                </div> 
              </div> 
            ))
          )}
        </div> 
      ) } 
    </> 
  ); 
}; 

export default Body;

关键改动说明 #

• 抽离过滤逻辑：把过滤后的用户列表存为filteredUsers变量，方便后续判断是否为空
• 规范filter返回值：filter方法应该返回布尔值（true/false）来决定是否保留当前项，而不是返回value或null，这样代码更符合React和JS的规范
• 单独处理无结果场景：直接判断filteredUsers.length === 0来显示提示，避免在map里做无效判断
• 优化细节：用模板字符串拼接字符串让代码更简洁，给图片添加alt属性提升可访问性，在catch里关闭loading状态避免页面一直处于加载中

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