React中如何在Map循环内添加输入框并向服务器提交反馈？

业务场景概述 #

通过API获取数量不固定的问答列表并渲染，每个问答组需添加反馈输入框，最终将所有反馈按指定格式提交至服务器：

示例问答数据 #

[
  { "question_id": 124, "question": "ques1", "answer": "answer1" },
  { "question_id": 224, "question": "ques2", "answer": "answer2" },
  { "question_id": 928, "question": "ques3", "answer": "answer3" }
]

要求提交的数据格式 #

{
  "set_feedbacks": [
    {
      "question_id": 124,
      "feedback": "a feedback for this question set1"
    },
    {
      "question_id": 224,
      "feedback": "a feedback for this question set2"
    }
  ]
}

疑问解答与实现方案 #

1. Map循环渲染input的合理性与 onChange 区分方案 #

Map是最优方案，React处理动态列表渲染时，map是标准且高效的方式，能自动根据数据源长度生成对应数量的输入框。

要区分不同组的输入，核心是用结构化的state存储每个问答组的反馈，而非单个变量：

• 初始化对象类型的state，以question_id为key存储对应反馈内容
• 在onChange事件中传递当前问答组的question_id，精准更新对应项

代码示例：

import { useState } from 'react';

const FeedbackForm = ({ data }) => {
  // 用对象存储反馈，key为question_id，value为输入内容
  const [feedbacks, setFeedbacks] = useState({});

  // 统一处理所有输入框的变化
  const handleFeedbackChange = (questionId, value) => {
    setFeedbacks(prevState => ({
      ...prevState,
      [questionId]: value
    }));
  };

  return (
    <div>
      {data.map(item => (
        // 必须添加唯一key，优先用question_id而非索引
        <div key={item.question_id} className="question-group">
          <p><strong>问题：</strong>{item.question}</p>
          <p><strong>回答：</strong>{item.answer}</p>
          <input
            type="text"
            value={feedbacks[item.question_id] || ''}
            onChange={(e) => handleFeedbackChange(item.question_id, e.target.value)}
            placeholder="请输入您的反馈"
          />
        </div>
      ))}
    </div>
  );
};

2. 构造提交数据结构的方案 #

不需要提前统计数量，直接从state转换即可完成格式构造：

• 将存储反馈的对象转换为接口要求的数组格式
• 可按需过滤空反馈（避免提交无内容的项）

提交函数示例：

const handleSubmit = async () => {
  // 把对象格式的反馈转换为接口要求的数组
  const submitData = {
    set_feedbacks: Object.entries(feedbacks)
      .map(([questionId, feedback]) => ({
        question_id: parseInt(questionId), // 确保ID为数字类型（根据接口要求调整）
        feedback: feedback.trim()
      }))
      .filter(item => item.feedback) // 过滤空反馈，可选
  };

  // 调用API提交
  try {
    const response = await fetch('/api/submit-feedbacks', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(submitData),
    });

    if (response.ok) {
      alert('反馈提交成功');
      setFeedbacks({}); // 清空输入
    } else {
      throw new Error('提交失败');
    }
  } catch (error) {
    console.error('提交出错:', error);
    alert('反馈提交失败，请重试');
  }
};

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