Next.js使用useState报错：page非React函数组件/自定义Hook

问题根源 #

你的代码里定义了大写的Page组件，但最后导出时用了小写的page：

export default page; // 此处为小写，与组件定义的`Page`不匹配

React要求组件名称必须以大写字母开头，ESLint的react-hooks/rules-of-hooks规则会以此判断函数是否为合法React组件。由于导出的是小写page，ESLint无法识别这是一个React组件，因此报错提示useState被调用在非组件/非Hook函数中。

修复步骤 #

只需将导出语句中的小写page改为大写Page，与组件定义保持一致：

export default Page;

额外优化建议：避免GraphQL变量硬编码拼接 #

你当前用模板字符串直接把data属性拼进GraphQL查询的写法，存在GraphQL注入风险，且组件每次渲染都会重复创建查询变量，影响性能。建议改用GraphQL变量传递参数：

修改后的查询与提交函数示例 #

// 将查询定义放在组件外部，避免重复创建
const CREATE_COMMENT = gql`
  mutation Contact($name: String!, $email: String!, $number: String!) {
    createContact(
      data: { name: $name, email: $email, number: $number }
    ) {
      id
      name
      email
      number
    }
  }
`;

const PUBLISH_CONTACT = gql`
  mutation PublishContact($id: ID!) {
    publishContact(
      where: { id: $id }
      to: PUBLISHED
    ) {
      id
      name
      email
    }
  }
`;

const Page = () => {
  const [data, setData] = useState({
    name: "",
    email: "",
    number: "",
  });

  const formSubmit = async (e: any) => {
    e.preventDefault();
    // 通过变量传递参数
    const { createContact }: any = await graphcms.request(CREATE_COMMENT, {
      name: data.name,
      email: data.email,
      number: data.number
    });

    const publish = await graphcms.request(PUBLISH_CONTACT, {
      id: createContact.id
    });

    // 提交后重置表单
    setData({ name: "", email: "", number: "" });
  };

  // ... 其余代码保持不变
};

export default Page;

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