React中Cannot read properties of null (reading 'map')错误：搜索栏无结果

错误根源 #

你的代码里searches初始值设为null，组件首次渲染、API请求未返回时，执行searches.map()会直接报错——因为null没有map方法。

具体修复方案 #

1. 初始化searches为空数组
   把初始状态从null改成空数组，确保任何时候都能安全调用map：

   const [searches, setsearches] = useState([]);
   

2. 添加空状态提示
   没有搜索结果时给用户明确反馈，避免空白：

   <div className="w-[50%] absolute max-h-[50vh] bg-zinc-200 top-[90%] overflow-auto">
     {searches.length === 0 ? (
       <p className="p-8 text-zinc-600">未找到匹配内容</p>
     ) : (
       searches.map((s, i) => (
         <Link key={i} className="hover:text-zinc-100 hover:bg-zinc-400 duration-200 font-semibold w-[100%] flex justify-start items-center p-8 bg-zinc-200 border-b-2">
           <img 
             src={s.poster_path ? `https://image.tmdb.org/t/p/w200${s.poster_path}` : ''} 
             alt={s.title || s.name || '无图片'} 
             className="w-16 h-24 object-cover mr-4"
           />
           <span>{s.title || s.name || s.original_name}</span>
         </Link>
       ))
     )}
   </div>
   

3. 优化API请求防抖
   用户输入时会频繁触发API请求，加个延迟定时器减少无效请求：

   useEffect(() => {
     const debounceTimer = setTimeout(() => {
       if (query.trim()) {
         getSearches();
       } else {
         setsearches([]); // 清空输入时重置结果
       }
     }, 300); // 300ms延迟，可按需调整
   
     return () => clearTimeout(debounceTimer); // 组件卸载或query变化时清理定时器
   }, [query]);
   

4. 完善API请求容错
   确保请求失败或返回数据异常时，searches始终是数组：

   const getSearches = async () => {
       try {
           const { data } = await lodu.get(`/search/multi?query=${query}`);
           setsearches(data.results || []); // 兜底处理，确保结果是数组
       } catch (error) {
           console.log("请求错误: ", error);
           setsearches([]); // 出错时清空结果
       }
   }
   

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