找不到命名空间“StateContext”

Question

我正在关注本教程：https://www.youtube.com/watch?v=BDCT6TYLYdI&t=7217s

我正在通过实现不同的功能但使用相同的工具来做这个项目的“我的版本”......

但是，我使用 typescript 而不是 JavaScript，我在 react 中遇到了 createContext 的问题。

在 VS Code 中，我收到此错误消息：

找不到命名空间“StateContext”。

当用普通的纯 JavaScript 尝试这个时，一切都很完美。

import React, { useContext, createContext } from "react";
import {
  useAddress,
  useContract,
  useMetamask,
  useContractWrite,
  SmartContract,
} from "@thirdweb-dev/react";
import { BaseContract, ethers } from "ethers";
import { EditionMetadataWithOwnerOutputSchema } from "@thirdweb-dev/sdk";

import { ProfileFormState } from "../pages/onboarding/widgets/OnboardingCreateNewProfileFormWidget";

type Profile = {
  owner: string;
  email: string;
  firstName: string;
  lastName: string;
  profileDescription: string;
  profilePic: string; // url
  bannerPic: string; // url
};

type Bean = {
  supporter: string;
  timestamp: Date;
  amount: number;
};

type StateContextType = {
  address: string | null;
  contract: SmartContract<BaseContract> | undefined;
  connect: () => void;
  createNewProfile: (form: {
    email: string;
    firstName: string;
    lastName: string;
    profileDescription: string;
    profilePic: string;
    bannerPic: string;
  }) => Promise<void>;
};

const StateContext = React.createContext<StateContextType>({
  address: null,
  contract: undefined,
  connect: () => {},
  createNewProfile: () => Promise.resolve(),
});

// todo why not implement with type?
interface StateContextProviderProps {
  children: React.ReactNode;
}

export const StateContextProvider = ({
  children,
}: StateContextProviderProps) => {
  // copied address from thirdweb dashboard
  const { contract } = useContract(
    "[WALLET_ADDRESS_STRING]"
  );
  const { mutateAsync: createNewProfile } = useContractWrite(
    contract,
    "createNewProfile"
  );

  const address = useAddress(); // somehow check that this method does not return undefined
  const connect = useMetamask();

  const createNewProfileRequest = async (formData: ProfileFormState) => {
    try {
      // todo what to do with the data now???
      const data = await createNewProfile({
        args: [
          address,
          formData.email,
          formData.firstName,
          formData.lastName,
          formData.profileDescription,
          formData.profilePic,
          formData.bannerPic,
        ],
      });

      console.log("Success from [createNewProfileRequest]");
    } catch (error) {
      console.error("Error from [createNewProfileRequest]", error);
    }
  };

  return <StateContext.Provider />;
};

export const useStateContext = () => useContext(StateContext);

Answer 1

由于您在 TypeScript 文件中使用 JSX，扩展名应该是

.tsx

而不是

.ts

.