如何在映射循环之间添加输入元素并将响应发送到服务器?

Question

我有一个用例，我将来自API的列表映射到ReactJS中的页面:

[
{question : "ques1", answer : "answer1"}, 
question : "ques2", answer : "answer2"}, 
question : "ques3", answer : "answer3"}, 
question : "ques4", answer : "answer4"}, 
question : "ques5", answer : "answer5"}, 
question : "ques6", answer : "answer6"}
]

现在，我必须为每个问题/答案集插入一个反馈输入框，并将其发送到服务器。

问题是对于多个用户，有未知数量的问题/答案集。例如，这里有:

用户1 - 10问题/答案集用户2 - 7问题/答案集．..等

我正在映射列表并插入一个输入字段:

data.map(() => (
<div>
<p>{itm.question}</p>
<p>{itm.answer}</p>
<input onChange={(e) => setInput(e.target.value)}/>
</div>
))

我必须发送响应为:

{
set_feedbacks : [
{
question_id : 124
feedback : "a feedback for this question set1"
},
{
question_id : 224
feedback : "a feedback for this question set2"
},
{
question_id : 928
feedback : "a feedback for this question set3"
}
]
}
// could be more and depends on the number of sets we have

我怎样才能做到这一点?

问题:

1. 问题/答案集是未知的，对于不同的用户来说是不同的，所以在每个集之间映射并插入input字段真的是最好的吗?如果是这样，如何为不同的集合添加不同的文本，因为输入文本只有单句柄更改方法。
2. 如何形成发送给API的结构?我是否需要先通过计算呈现到屏幕上的集合的数量来形成一个数组?

感谢您的阅读。

任何小小的指导都会对我很有帮助

Answer 1

如果我理解正确，您希望创建一个表单，用户可以在其中提供对每个问题/答案集的反馈。

有效的方法之一是

1. 创建一个以问题id为键，以反馈为值的对象——

   {"ques1":"this is the feedback"}

2. 每当输入更新时更新特定问题id中的反馈状态

所以最后的代码可以是

映射数据

data.map((itm) => (
<div>
<p>{itm.question}</p>
<p>{itm.answer}</p>
<input onChange={(e) => setFeedback({ ...feedback, [itm.question]: e.target.value })} />
</div>

对于状态

const [feedback, setFeedback] = useState({});

将此反馈数据转换为所需的数据格式

const onSubmit = () => {
const feedbackarr = [];
Object.keys(feedback).map((v) => {
feedbackarr.push({
"question_id": v,
"feedback": feedback[v]
})
})
const tosend = {
set_feedbacks: feedbackarr
}
}

Answer 2

如果您添加不同的输入框，那么您需要相同数量的状态，每个输入框一个。在这里，而不是添加单独的输入框，你可以添加一个按钮，从一个模态将工作，你可以把问题id，这将来自按钮onclick函数和那里，随着模态输入反馈与相应的问题id，你可以使一个post请求api。