将对象添加到数组末尾

弗雷德里科勒

在Next.JS应用程序中构建对象时遇到一些问题。这很可能是由于我缺乏JavaScript和React能力。我有一个从api调用呈现的表单。它返回一个对象数组，如下所示：

[
  {
    "formId": "uuid",
    "description": "Description of form",
    "questions": [
        {
            "questionId": "uuid",
            "text": "question 1?",
            "alternatives": [
                {
                    "text": "No",
                    "ratingValue": 1
                },
                {
                    "text": "Yes",
                    "ratingValue": 5
                }
            ]
        }
     ]
}]

该对象将包含多个表格，每个表格可以包含多个问题。我将每个问题的值传递到组件中名为pushAnswer的函数中，如下所示：


<Form.Check
  type="radio"
  name={question.questionId}
  value={alternative.ratingValue}
  onChange={event => { 
    pushAnswer(form.formId, question.questionId, event.target.value)
}} />

我有状态变量const [formBody, setFormBody] = useState({form:[]})，pushAnswer函数看起来像这样：

 const pushAnswer = (formId, questionId, answerValue) => {
      const currentForm = formBody; 
      let answeredForm = currentForm.forms.find(form => form.formId === formId);

      // if the form ID doesn't exist, add it
      if (!answeredForm) {
        answeredForm = {
          formId,
          answers: []
        } 
      } 

      // check if the questionId exists
      let answeredQuestion = answeredForm.answers.find(answer => answer.questionId === questionId)

      if (!answeredQuestion) {
        answeredQuestion = {
          questionId,
          rating: answerValue
        }
      }

      answeredQuestion.rating = answerValue;

      setFormBody(oldForm => ({
        ...oldForm,
        forms: [
          {
            formId: answeredForm.formId,
            questions: [
              {
                questionId: answeredQuestion.questionId,
                rating: answeredQuestion.rating
              }
            ]
          }
        ]
      }))  
  }

我想产生这样的答案：

{
  "forms": [
    {
      "formId": "2b945644-a9c3-473e-afac-1236bc1575ce",
      "questions": [
        {
          "questionId": "289a9e8a-a607-464a-8939-48223819f413",
          "rating": "1"
        },
        {
          "questionId": "another uuid",
          "rating": "5"
        }
      ]
    },
    {
      "formId": "another uuid",
      "questions": [
        {
          "questionId": "another uuid",
          "rating": "5"
        }
      ]
    }
  ]
}

第一个问题被添加到formBody中，但是当我尝试获取另一个问题的值时，出现了错误let answeredQuestion = answeredForm.answers.find(answer => answer.questionId === questionId)提示Cannot read property 'find' of undefined。

谁能建议我该如何解决？

路德维格

您没有在状态中保存正确的值，应该

      const [formBody, setFormBody] = useState({forms:[]})


      setFormBody(oldForm => ({forms: [
        ...oldForm.forms,
        [
          {
            formId: answeredForm.formId,
            questions: [
              {
                questionId: answeredQuestion.questionId,
                rating: answeredQuestion.rating
              }
            ]
          }
        ]
      ]}))

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。