Next.js注册页面是否需用useState？仅用于API请求避重复渲染

首先明确：方案a完全不可用。这个普通的const对象会在组件每次渲染时重新初始化，你在onChange里修改它的属性后，下一次组件渲染时所有值都会被重置回初始状态，根本存不住用户输入的内容，没法用来组装API请求体。

方案b是可行的，但每次调用setValues都会触发组件重新渲染——虽然你的输入框没绑定value（属于非受控组件），渲染不会重置输入框内容，但频繁的组件渲染还是会带来不必要的性能开销。

如果你想追求更优的性能，同时保证数据稳定存储，推荐用useRef替代useState，因为修改ref.current不会触发组件渲染，刚好匹配你“仅用这些值作为API请求体、不用于页面渲染”的场景：

import { useRef } from 'react';

const valuesRef = useRef<SignupProps>({
  firstName: "",
  email: "",
  lastName: "",
  notifications: false,
  password1: "",
  password2: "",
  termsConditions: false,
  username: "",
});

// 示例 onChange 处理函数
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, type } = e.target;
  const value = type === 'checkbox' ? (e.target as HTMLInputElement).checked : e.target.value;
  
  valuesRef.current = {
    ...valuesRef.current,
    [name]: value
  };
};

// 提交时直接用 valuesRef.current 作为请求体
const handleSubmit = async () => {
  try {
    await fetch('/api/signup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(valuesRef.current),
    });
    // 提交后的逻辑，比如跳转、提示等
  } catch (err) {
    // 错误处理
  }
};

总结：

• 方案a直接排除，无法稳定存储用户输入
• 方案b可以用，但有不必要的渲染开销
• 最优解是用useRef，既避免组件频繁渲染，又能稳定存储请求体所需的数据

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