React中如何将useState表单对象存入questions数组并添加post_id

1. 提交/使用时临时组装目标结构 #

如果只是在提交数据或传递数据时需要这个结构，不用额外维护state，直接组装就行：

// 替换成你实际的post_id值，比如从props、路由或其他state里取
const targetPostId = 123;

// 直接把formFields放进questions数组，再加上post_id
const finalData = {
  post_id: targetPostId,
  questions: [...formFields] // 浅拷贝原数组，避免后续操作影响原数据
};

// 比如用这个finalData做接口提交
fetch('/your-submit-api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(finalData)
});

2. 实时维护包含目标结构的state #

如果需要formFields变化时自动同步到目标结构，可以直接把state改成你要的最终格式：

// 初始化state，直接包含post_id和questions数组
const [formData, setFormData] = useState({
  post_id: 123, // 初始post_id，按需调整
  questions: [
    { label: '初始问题1', type: 'text' },
    { label: '初始问题2', type: 'radio' }
  ]
});

// 示例：添加新表单字段的方法
const addNewField = () => {
  setFormData(prev => ({
    ...prev,
    questions: [...prev.questions, { label: '', type: 'text' }]
  }));
};

// 示例：更新某个字段的方法
const updateFieldValue = (index, key, value) => {
  setFormData(prev => ({
    ...prev,
    questions: prev.questions.map((item, i) => 
      i === index ? { ...item, [key]: value } : item
    )
  }));
};

关键提醒 #

• 不管哪种方式，用[...formFields]或者Array.from(formFields)拷贝数组，避免原数组被意外修改
• 如果post_id是动态获取的（比如接口返回、路由参数），要确保组装数据时已经拿到正确值
• 用第二种方式的话，所有操作表单字段的逻辑都要改成对formData.questions操作

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