reactjs 如何在map循环之间添加输入元素并将响应发送到服务器？

bihw5rsg 于 2022-12-26 发布在 React

关注(0)|答案(2)|浏览(159)

我有一个用例，我将来自API的列表Map到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问题/回答集......等。
我Map列表并插入一个输入字段，如下所示：

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.问题/答案集是未知的，并且对于不同的用户是不同的，所以在每个集之间Map并插入一个input字段真的是最好的吗？如果是这样，如何为不同的集添加不同的文本，因为输入文本只是使用单一的句柄更改方法。
1.如何形成结构并将其发送到API？我需要先通过计算呈现到屏幕的集合的数量来形成数组吗？
感谢您的阅读。
任何一点指导都会对我很有帮助

reactjs

来源：https://stackoverflow.com/questions/74915117/how-to-add-input-elements-between-a-map-loop-and-send-the-response-to-the-server

2条答案

按热度按时间

blmhpbnm1#

如果我理解正确的话，您希望创建一个表单，用户可以在其中对每个问题/答案集提供反馈。
有效的方法之一可以是
1.创建一个对象，将问题ID作为键，将反馈作为值，如-
第一个月
1.每当输入更新时更新特定问题id中的反馈状态
所以最终的代码可以是
Map数据的步骤

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
    }
}

赞(0）回复(0）举报 2022-12-26

6mzjoqzu2#

如果你添加不同的输入框，那么你需要相同数量的状态，每个输入框一个。在这里，你可以添加一个按钮，从那里模态将工作，你可以把questionid，这将来自按钮onclick函数，那里，沿着模态输入作为反馈与各自的questionid，你可以作出一个后请求API。

赞(0）回复(0）举报 2022-12-26