NextJS中基于ContextAPI的简易全局状态管理失效问题排查及修正方案请求

我帮你梳理下代码里的几个关键错误，正是这些导致状态无法正常传递：

主要错误点 #

• StateProvider初始状态错误：useState(Number) 是把构造函数作为初始值，而不是一个数字类型的初始值，应该设置具体的初始数值（比如0）。
• Admin页面的无用错误代码：updateState 函数里调用createContext(AppContext)完全没必要，而且onKeyPress绑定这个函数是错误操作，修改状态只需要setDvds即可。
• AboutMe页面的上下文使用错误：
  • 直接访问AppContext.dvs是错误的，上下文需要通过useAppContext钩子来获取值，而且这里还拼写错误（dvds写成了dvs）。
  • useAppContext(dvds)的用法完全错误，这个钩子不需要传参数，调用它会返回上下文对象，从中解构出dvds即可。

修正后的完整代码 #

StateProvider.js #

import React, { useContext, createContext, useState } from 'react';
export const AppContext = createContext();
export const StateProvider = ({ children }) => {
  // 这里设置初始数值为0，而不是Number构造函数
  const [dvds, setDvds] = useState(0);
  const sharedState = {
    dvds,
    setDvds,
  };
  return (
    <AppContext.Provider value={sharedState}>{children}</AppContext.Provider>
  );
};
export function useAppContext() {
  return useContext(AppContext);
}

_app.js #

（这个文件没问题，保持原样即可）

import '../styles/globals.scss';
import { StateProvider } from '../lib/appCtx';
function MyApp({ Component, pageProps }) {
  return (
    <>
      <StateProvider>
        <Component {...pageProps} />
      </StateProvider>
    </>
  );
}
export default MyApp;

admin.js #

import React, { useContext } from 'react';
import styles from '../styles/Admin.module.scss';
import { AppContext } from '../lib/appCtx';
export default function Admin() {
  const { dvds, setDvds } = useContext(AppContext);
  // 移除无用的updateState函数，直接在onChange里处理数值转换
  const handleInputChange = (e) => {
    // 把输入值转为数字，避免字符串类型的状态
    const newValue = parseInt(e.target.value, 10);
    if (!isNaN(newValue)) {
      setDvds(newValue);
    }
  };
  return (
    <>
      {/* 保留你原本的其他结构 */}
      <div className={styles.card}>
        <div className={styles.title}>Number of DVDs</div>
        <p className={styles.text}>
          {new Intl.NumberFormat('de-DE', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0,
          }).format(dvds)}
        </p>
        {/* 替换为正确的change处理函数，移除无用的onKeyPress */}
        <input type='text' onChange={handleInputChange} />
      </div>
      {/* 保留你原本的其他结构 */}
    </>
  );
}

aboutme.js #

import Image from 'next/image';
import styles from '../styles/Aboutme.module.scss';
import { useAppContext } from '../lib/appCtx';
export default function AboutMe() {
  function thousands_separators(num) {
    var num_parts = num.toString().split('.');
    num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return num_parts.join('.');
  }
  // 通过useAppContext钩子获取上下文里的dvds值
  const { dvds } = useAppContext();
  return (
    <div>
      {/* 保留你原本的其他结构 */}
      <div className={styles.col}>
        <p>
          <span>
            {new Intl.NumberFormat('de-DE', {
              minimumFractionDigits: 0,
              maximumFractionDigits: 0,
            }).format(dvds)}
          </span>
          <br />
          dvds in collection
        </p>
      </div>
      {/* 保留你原本的其他结构 */}
    </div>
  );
}

额外说明 #

• 我在Admin页面的输入处理里加了parseInt和isNaN判断，避免输入非数字内容导致状态异常。
• 确保所有组件都被StateProvider包裹（你已经在_app.js里做了，这部分没问题），这样所有页面都能访问到全局状态。

内容的提问来源于stack exchange，提问作者Ydonut13