Блог

У меня есть динамическая форма со следующей реализацией. Проблема в том,что я хочу «проверить» флажок, существует ли ответ на этот «Идентификатор вопроса» в массиве ответов с выбранной опцией (т. Е. A, B). таким образом, условие проверки должно answers[index].userChoice.option быть равно Object.keys(x).

 import fieldsL from "./fields.json"; 

function App() { 
  let [Fields , setFields] = useState([]);
  let [answers, setAnswers] = useState([]);
const updateAnswer = ((qid,option,optionValue) => {
      let ans = answers;
      let singleAns = {
        questionId : qid,
        userChoice: 
        { 
          option: option, 
          optionValue: optionValue, 
          isChecked: true
        }
      };
      if(answers.length > Fields) return console.warn("Invalid Question ID")
      if(answers.find((sp) => sp.questionId === qid)) {
        var index = answers.map(function(x1) {return x1.questionId}).indexOf(qid);
        answers[index].userChoice.option = option;
        answers[index].userChoice.optionValue = optionValue;
        console.log("Existing Answer Updated");
      }
      else ans.push(singleAns)
      ans.sort((a, b) => parseFloat(a.questionId) - parseFloat(b.questionId)); 
      setAnswers(ans)
      console.log(answers)
  })

useEffect(()=>{
  console.log("useEffect")
  setFields(fieldsL.data)
},[])
let Questions = fieldsL.data.question;
let displayFields = Questions.map((e,index)=>{
return <div key={index} >
<label className="label">{e.content}</label>

<div className="control">
{
e.radio?  e.option.map((x,index2) => {

  console.log(index)
  //console.log(x)
 return <div classID="field" key={index2}>
<div classID="control">
  <label classID="checkbox">
    <label> {Object.keys(x)[0]}     </label>

    <input type="checkbox" name="question" onChange={()=> updateAnswer(e.questionId,Object.keys(x)[0],Object.values(x)[0])}/>
    amp;nbsp; {Object.values(x)[0]}
    { 

    }
  </label>
</div>
</div> }
) : <span>Empty</span>
}
</div>
</div>;
})

 

На каждой итерации вашего цикла вы могли бы делать:

 const value = Object.keys(x);
const answerIndex = answers.findIndex(a => a.userChoice.option === value);
 

а потом, когда ты вернешься:

 <input
  type="checkbox"
  name="question"
  checked={answerIndex >= 0}
  onChange={()=> updateAnswer(e.questionId,Object.keys(x)[0],Object.values(x)[0])}
/>
 

Очевидно, было бы лучше, если бы ваши данные были структурированы по-другому, так как вышесказанное дало бы вам сложность O(2n), поскольку вы выполняли бы цикл внутри цикла. Однако для меньшего массива это вообще не должно быть проблемой.