我在反应时收到错误“无法读取 null 的属性（读取“地图”）”，请参阅我的代码

Question

我正在用 React 构建一个电影网站，问题发生在 usestate 我想请看一下

我试图让我的搜索栏显示一些结果，但它没有，并且在控制台中显示错误无法读取 null 的属性（读取“地图”）

// import axios from "axios";
import React, { useEffect, useState } from "react";
import lodu from "../../utils/lodu"
import { Link } from "react-router-dom";
function Topnav(){
    const[query,setquery]=useState("");
    const[searches,setsearches]=useState(null);
    const getSearches = async()=>{
        try {
         const {data} = await lodu.get(`/search/multi?query=${query}`); 
         setsearches(data.results)
        } catch (error) {
           console.log("error is ",error) 
        }
    }
   useEffect(()=>{
    getSearches();
   },[query])
return(<>
<div className="w-full h-[12vh] relative flex justify-center items-center">
<i class="text-zinc-400 text-3xl ri-search-2-line"></i>
    <input  onChange={(e)=>{setquery(e.target.value)}}  value={query} className="w-[50%] text-zinc-200 mx-10 p-3 text-xl outline-none bg-transparent border-none" type="text"placeholder="search anything?" />
   {query.length > 0 && (<i 
   onClick={()=>setquery("")}
    class="text-zinc-400 text-3xl ri-xrp-fill"></i>)}
    <div className="w-[50%] absolute max-h-[50vh] bg-zinc-200 top-[90%] overflow-auto">
        {searches.map((s,i)=>{ 
         return (<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="" alt="" />
          <span>hi</span>
          </Link>)
        })}
  
       
    </div>
</div>

</>)
}

export default Topnav

Answer 1

页面加载搜索设置为空。另外，在页面加载时，您正在映射搜索。

尝试将

{searches.map((s,i)=>{ 

更改为

{searches?.map((s,i)=>{