TypeError：无法在 NextJs Page Router 上读取 null 属性（读取“useState”），但在 NextJs App Router 中不会发生

Question

我正在尝试使用 tsup 捆绑器创建一个简单的 useState React hook 库，并使用 NextJs App Router 和 Page Router 来创建使用示例。我尝试在 App Router 内使用该库，它工作正常，但是当我尝试在 Page Router 上使用它时，它返回错误

TypeError: Cannot read properties of null (reading 'useState')

存储库链接：https://github.com/elianrichard/simple-react-package

重现步骤

git clone https://github.com/elianrichard/simple-react-package.git
cd simple-react-package
npm install
npm run build

应用程序路由器

npm --prefix ./example/nextjs-app-router install
npm --prefix ./example/nextjs-app-router run dev

页面路由器

npm --prefix ./example/nextjs-page-router install
npm --prefix ./example/nextjs-page-router run dev

我尝试删除库目录中的

node_modules

，但错误仍然存在。我真的很困惑我哪里出错了，你可以看到存储库中的所有配置。谢谢你！

Answer 1

import React from "react";

export default function useNewState() {
  const [state, setState] = React.useState(0);

  return {
    state,
    setState,
  };
}

根据您的代码，您已经编写了 useState 但没有使用只是返回它，这是不正确的 你必须这样做

  import React from "react";

export default function MyComponent() {
  // Call the useNewState hook to initialize state
  const { state, setState } = useNewState(0);

  // Event handler to update state
  const handleClick = () => {
    setState(prevState => prevState + 1); // Increment state by 1
  };

  return (
    <div>
      <p>Current State: {state}</p>
      <button onClick={handleClick}>Increment State</button>
    </div>
  );
}

setState 用于存储数据的值 state 此数据用于获取存储的值