错误：无法解构“（0，react__WEBPACK_IMPORTED_MODULE_1__.useContext）（...）”的属性“标题”，因为它未定义（Next.js聊天应用程序）

Question

我在使用 Next.js 和 Solidity 构建聊天应用程序时遇到错误“无法解构 '(0 , React__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' 的属性 'title'，因为它未定义”。我正在关注 YouTube 教程，但尽管有相同的代码，我还是收到了此错误。

下面是我的代码和错误：

在浏览器中出现此错误：

Server Error
TypeError: Cannot destructure property 'title' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is undefined.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/index.js (5:9) @ title

  3 | import { ChatAppContext } from "../context/ChatAppContext";
  4 | const ChatApp =() =>{
> 5 |  const {title} = useContext(ChatAppContext);
    |         ^
  6 |  return <div>{title}</div>;
  7 | };
  8 |   

上下文>ChatAppContext.js :

import React, {useState,useEffect} from "react";
import {useRouter} from "next/router";

//Internal  import 
import {
    CheckIfWalletConnected,
    connectWallet ,
     connectingWithContract,
}  from "../utils/apiFeature";

export const ChatAppContext = React.createContext();

export const ChatAppProvider = ({children}) =>{
    const title = "Hey welcome to blockchain chatApp";

    return   (
        <ChatAppContext.Provider value= {{title}}>
            {children}
        </ChatAppContext.Provider>
    );

}; 

页面>app.js

import React from 'react';
import "../styles/globals.css";
import { ChatAppProvider } from "../context/ChatAppContext";
import { NavBar } from "../components/index";

const MyApp = ({ Component, pageProps }) => (
  <div>
    <ChatAppProvider>  {/* Wrap the app with the provider */}
      <NavBar />
      <Component {...pageProps} />
    </ChatAppProvider>
  </div>
);

export default MyApp;

页面>index.js：

import React, { useEffect, useState, useContext } from "react"; // Correct import
import { ChatAppContext } from "../context/ChatAppContext";
const ChatApp =() =>{
 const {title} = useContext(ChatAppContext);
 return <div>{title}</div>;
};
  
  export default ChatApp;

utils> apiFeature.js：

import {ethers} from  "ethers";
import Web3Modal from "web3modal";

import {ChatAppAddress,ChatAppABI} from "../context/constants";

export const CheckIfWalletConnected =  async () =>{
    try {
        if(!window.ethereum) return console.log("Install MetaMask");
         const accounts = await window.ethereum.request({
      method:"rth_accounts",
         });
         const firstAccount = accounts[0];
         return firstAccount;
    }catch (error){
        console.log("error");
    }
};
export const connectWallet = async ()=>{

try {
    if(!window.ethereum) return console.log("Install MetaMask");
    const accounts = await window.ethereum.request({
    method: "eth_requestAccounts",
    });
    const firstAccount = accounts[0];
} catch (error) {
    console.log(error);
}

};

const fetchContract = (signerOrProvider)=>
new ethers.Contract(ChatAppABI,ChatAppAddress,signerOrProvider);

export const connectingWithContract =async () =>{
    try {
const web3modal = new Web3Modal();
const connection = await web3modal.connect();
const provider = new ethers.providers.Web3Provider(connection);
const signer = provider.getSigner();
const contract = fetchContract(signer);
 return contract;
    } catch(error){
        console.log(error);
    }

}
export const convertTime = (time)=>{
      const newTime = new Date (time.toNumber());
      const realTime = newTime.getHours()+"/" +
      newTime.getMinutes() + "/" + 
      newTime.getSeconds() + "Date:"+
      newTime.getDate() +
      "/"  +
    (  newTime.getMonth() + 1  ) +
    "/" + 
    newTime.getFullYear();
    return realTime;

      

}

Answer 1

因为 title 变量可能是未定义的，所以你必须尝试这个。

const ctx = useContext(ChatAppContext);
const title = ctx?.title;