Object 可能是 null 反應/打字稿

Question

我一直遇到這個錯誤，代碼在普通反應中工作正常，但在 typescript 中它一直拋出這個錯誤“對象可能為空”。 我試着用“。”來反駁它。 但它沒有幫助。

日志中的第二個錯誤是“無法讀取 null 讀取的屬性(textContent) ”

我將其設置為 false

"strictNullChecks": false,

這是一個沙箱 - https://codesandbox.io/s/sweet-mclean-nrhcdq?file=/src/App.tsx

這是獲取 api 調用 -

const [isLoading, setLoading] = useState(false);
  //storing data
  const [data, setData] = useState(false);

  //fetching data
  useEffect(() => {
    setLoading(true);

    const fetchList = async (): Promise<UsersList> => {
      const result: any = await fetch("https://randomuser.me/api/?results=20")
        .then((res) => res.json())
        .then((data) => {
          setData(data);
          setLoading(false);
          console.log(data);
          
        });
        
      return result;
    };
    fetchList();
    
    
  }, []);

這是導致我出現問題的代碼，有更好的方法嗎？ 有人提到了 useref，但我不確定如何使用 useEffect 中的獲取調用來實現它。

所需的 output 是包含 Miss 的任何文本都具有藍色背景。

const h2 = window.document.getElementById("person")!
  h2.innerHTML = h2.textContent!.replace(/[Miss]/g, "<span class='title'>Miss</span>");

.title {
background-color: blue;
}

后來在 html 中，我過濾並映射了數據 -

<div style={hoverStyle} className="grid grid-cols-4 gap-2 p-2 mt-20">
        {data?.results.filter((val: any)=>{
          if (searchUser === "") {
            return val
          } else if (val.name.first.toLowerCase().includes(searchUser.toLowerCase())) { 
              return val          
          } else if (val.email.toLowerCase().includes(searchUser.toLowerCase())){
            return val
          } else if 
            (val.location.city.toLowerCase().includes(searchUser.toLowerCase())){
              return val
            } 
        }).map((d: any) => (
              
          <div style={hoverStyle} className=" ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300  border-white shadow-slate-500 bg-white hover:opacity-95 rounded-lg container p-5">
            <img className="rounded-full w-44 h-44 " src={d.picture.large} />
            <h2 id="person" >{d.name.title}</h2>

有任何想法嗎？

Answer 1

您正在通過一個數組進行映射，因此它會創建多個 h2 元素，這就是為什么需要 select 所有 h2 元素，並在數據加載完成時執行此操作。 嘗試這些更改的行。

 let h2 = document.querySelectorAll("h2")
  h2.innerHTML = !isLoading && h2.textContent?.replace(/[Miss]/g, "<span class='title'>Miss</span>");

這也是在執行此操作后從您的沙箱中截取的屏幕截圖。 希望你正在尋找相同的。