Uncaught TypeError: Cannot destructure property 'connectWallet' of 'useContext(...)' as it is undefined at Welcome (Welcome.jsx)

Question

我正在尝试为我的区块链项目制作一个网页，并运行进入 JS Mastery youtube web3 教程，我正在关注它。我正在创建连接钱包按钮，但在从我的上下文中导入它时遇到了一些麻烦。代码下方：

//inside my prenotationContext.jsx
const PrenotationContext = React.createContext();
export default PrenotationContext;
export const PrenotationProvider = ({children}) => {
    const [currentAccount, setCurrentAccount] = useState("");
    const [formData, setFormData] = useState({addressTo: "", amount:"", keyword:"", description:"" });
    const [isLoading, setIsLoading] = useState(false);
     ...
    const connectWallet = async () => {
        try {
          if (!ethereum) return alert("Please install MetaMask.");
    
          const accounts = await ethereum.request({ method: 'eth_requestAccounts', });
          console.log(accounts)
          setCurrentAccount(accounts[0]);
          window.location.reload();
        } catch (error) {
            console.log(error);
            throw new Error("No ethereum object");
        }
    };
    ...
    return (
        <PrenotationContext.Provider 
        value={{
            connectWallet,
            currentAccount,
            formData, 
            sendPrenotation, 
            handleChange,}}>
                {children}
        </PrenotationContext.Provider>
    );
}

//inside my welcome.jsx
import  PrenotationContext  from '../context/PrenotationContext.jsx';
...
const Welcome = () => {
    // Transfering data from context/PrenotationContext to components
    const {connectWallet,currentAccount, formData, sendPrenotation, handleChange} = useContext(PrenotationContext);
    ...

错误如下： Uncaught TypeError: Cannot destructure property 'connectWallet' of 'useContext(...)' as it is undefined at Welcome (Welcome.jsx:25:12)

顺便说一句，我不是前端开发人员，这是我第一次使用 JS 和 React，所以我不容易找到错误

Answer 1

如果你想调用上下文，你应该通过 contextProvider 包装你的组件。

const App = () => {
  return (
    <PrenotationProvider>
    // some other components
      <Welcome />
    // some other components
    </PrenotationProvider>
  );
};

在应用程序的高层放置一个提供者，然后您将获得任何组件中的所有数据

Uncaught TypeError: Cannot destructure property 'connectWallet' of 'useContext(...)' as it is undefined at Welcome (Welcome.jsx)

Uncaught TypeError: Cannot destructure property 'connectWallet' of 'useContext(...)' as it is undefined at Welcome (Welcome.jsx)

javascript-objects

reactjs

web3