如何在Next.js中使用上下文Api

Question

首先，我想说我从来没有使用过Next.js或context api，所以请耐心听我说。

我目前正在Next.js中开发一个web应用程序，其中有多个页面，每个页面都包含一个表单。我希望有某种全局状态，以便能够设置和更新每个表单的数据。所有表单数据一起

例如：第1页=名称，第2页=说明，...

从我在网上读到的内容来看，我认为使用上下文api就足够了，但我遇到了困难。当我在第一个表单上填写名字时，它不会保存在全局状态，因为它不会显示在第二页上。

我不明白我哪里出了错，所以我非常欢迎任何帮助！

附注。如果我没有解释正确的部分或忘记添加一些代码段，请告诉我。

BusinessContext.tsx

import { createContext, useState } from "react";

//accessible data
export interface BusinessContextData {
  businessName: string;
  handleBusinessName: (name: string) => void;
}

//default values
export const businessContextDefaultValue: BusinessContextData = {
  businessName: "",
};

//provider
export const BusinessContext = createContext<BusinessContextData>(
  businessContextDefaultValue
);

//hooks that components can use to change the values
export function useBusinessContextValue(): BusinessContextData {
  const [businessName, setBName] = useState<string>("");

  const handleBusinessName = (name: string) => {
    setBName(name);
  };

  return {
    businessName,
    handleBusinessName,
  };
}

app.tsx(_A)

import type { AppProps } from "next/app";
import {
  useBusinessContextValue,
  BusinessContext,
} from "../context/businessContext";
import "../styles/global.css";

function MyApp({ Component, pageProps }: AppProps) {
  const businessContextValue = useBusinessContextValue();

  return (
    <BusinessContext.Provider value={businessContextValue}>
      <Component {...pageProps} />
    </BusinessContext.Provider>
  );
}

export default MyApp;

businessName.tsx-名称表单页（应将给定的名称保存在全局状态）

import { ChangeEvent, FormEvent, useContext, useState } from "react";
import { BusinessContext } from "../context/businessContext";

const IndexPage = () => {
  const { handleBusinessName } = useContext(BusinessContext);
  const router = useRouter();
  const [businessNameState, setBusinessnameState] = useState<string>("");

  const onSubmit = (e: FormEvent) => {
    handleBusinessName(businessNameState);
    router.push("/businessVision");
  };

  return (
        ...
        <form onSubmit={(e: FormEvent) => onSubmit(e)}>
          <div className="formInputRow">
            <input
              className="formInput"
              type="text"
              placeholder="Business name"
              required
              value={businessNameState}
              onChange={(val: ChangeEvent<HTMLInputElement>) =>
                setBusinessnameState(val.target.value)
              }
            />
          </div>
          <button type="submit">
            Next
          </button>
        </form>
        ...
  );
};

export default IndexPage;

businessVision.tsx-应显示全局状态中的业务名称

import { ChangeEvent, FormEvent, useContext, useEffect, useState } from "react";
import { BusinessContext } from "../context/businessContext";

const BusinessVisionpage = () => {
  const { businessName } = useContext(BusinessContext);
  const router = useRouter();
  const [businessVisionState, setBusinessVisionState] = useState<string>("");

  return (
        ...
        <h1>
          <span>{businessName}</span>
        </h1>
        ...
  );
};

Answer 1

您的上下文设置正确，但您需要防止

的提交默认行为，以便正确地导航到下一页。

const onSubmit = (e: FormEvent) => {
    e.preventDefault(); // Prevents submit default behaviour
    handleBusinessName(businessNameState);
    router.push("/businessVision");
};