如何在 Next.js 中使用 Context Api

Question

首先我想说的是，我从未使用过 next.js 或 context api，所以请多多包涵。

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

例如：第 1 页 = 名称，第 2 页 = 描述，...

根据我在网上阅读的内容，我认为使用上下文 api 就足够了，但我碰壁了。当我在第一个表单上填写名称时，它不会保存在全局状态中，因为它没有显示在第二页上。

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

附言如果我没有正确解释某些部分或忘记添加一些代码 sn-p 请告诉我。

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

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

您的上下文设置正确，但您需要阻止<form> 的提交默认行为，以便可以正确导航到下一页。

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