收到此错误类型错误：无法读取未定义的属性“SearchUserIp”

Question

我正在使用 ip tracker ，但收到此错误.. 我已经创建了 Context 并在标头组件中使用了它，这是我的上下文提供程序代码

我已经阅读了文档和解决方案，有一个解决方案，但我无法理解 因为这些解决方案包括 this.props 和 class 方法，我对 class 组件不熟悉

import React, { createContext, useState, useEffect } from "react";

export const AppContext = createContext();

export const AppContextProvider = (props) => {
  const [trackInfo, setTrackInfo] = useState({
    ip_adress: "...loading",
    city: "loading...",
    timeZone: "...loading",
    isp: "loading...",
    location: [0, 0],
  });

  const getUserIp = async () => {
    const res = await fetch(
      `https://geo.ipify.org/api/v1?apiKey=${process.env.REACT_API_KEY}`
    );

    if (res.ok) {
      const data = res.json();
      const { ip, location, isp } = data;

      setTrackInfo({
        ip_adress: ip,
        city: location.city,
        timeZone: location.timezone,
        isp: isp,
        location: [location.lat, location.lng],
      });
    } else {
      throw new Error("invalid response");
    }
  };
  const SearchUserIp = async (ip) => {
    const res = await fetch(
      `https://geo.ipify.org/api/v1?apiKey=${process.env.REACT_API_KEY}&ipAddress=${ip}`
    );

    if (res.ok) {
      const data = res.json();
      const { ip, location, isp } = data;

      setTrackInfo({
        ip_adress: ip,
        city: location.city,
        timeZone: location.timezone,
        isp: isp,
        location: [location.lat, location.lng],
      });
    } else {
      throw new Error("invalid response");
    }
  };
  useEffect(() => {
    getUserIp();
  }, []);

  return (
    <AppContext.Provider value={{ SearchUserIp, trackInfo }}>
      {props.children}
    </AppContext.Provider>
  );
};

这是我的标题组件

import React, { useContext, useState } from "react";
import { AppContext } from "../context/AppContext";
import arrow from "../assets/images/icon-arrow.svg";

const Header = () => {
  const [inputVal, setInputVal] = useState([]);
 const { SearchUserIp } = useContext(AppContext)

  const handleClick = () => {
    SearchUserIp(inputVal);
  };
  return (
    <>
      <div className="header">
        <div className="header_content">
          <h1>IP Adress Tracker</h1>
        </div>
        <div className="search_box">
          <input
            type="text"
            placeholder="search for any IP adress or domain"
            value={inputVal}
            onChange={(e) => setInputVal(e.target.value)}
          />
          <button onClick={handleClick}>
            <img src={arrow} alt="search" />
          </button>
        </div>
      </div>
    </>
  );
};

export default Header;

帮助我被困两天的人。 提前致谢