无法在 React 中读取 null 的属性（读取“map”）

Question

我试图让我的搜索栏显示一些结果，但它没有，并且显示错误

Cannot read properties of null (reading 'map')

// 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) => (
                        <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)=>{ 

Answer 2

将

useState

默认值更新为空数组。

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

Answer 3

您可以简单地添加检查搜索结果是否具有某些值，然后仅像这样映射：

{searches && searches.length > 0 && 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="" alt="" />
                            <span>hi</span>
                        </Link>
                    )
                    )}

并更新搜索的默认值如下：

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

Answer 4

最初，您已将搜索状态变量的值设置为空：

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

然后立即在 null 上调用 map 方法

{null.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>)
    })}

这会生成错误“无法读取 null 的属性（读取“地图”）”。要解决此问题，请将搜索的初始值设置为空数组，以便映射方法成为数组上的有效方法调用（无论是否为空）。

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

或者在对“searches”变量调用“map”方法之前检查它是否已使用“Async”函数“getSearches”返回的数据进行更新：

{searches && 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>)
})}