如何更新动态无线电输入的状态？

Question

我使用API获取问题，并使用以下动态无线电选项显示问题

​

[
    {
        "id": "question01",
        "question": "Which of the following profiles you belongs",
        "multiple": false,
        "options": [
            {
                "id": "option01",
                "title": "Buyer"
            },
            {
                "id": "option02",
                "title": "Planner"
            },
            {
                "id": "option03",
                "title": "Merchandiser"
            },
            {
                "id": "option04",
                "title": "Designer"
            },
            {
                "id": "option05",
                "title": "Analyst"
            }
        ]
    },
    {
        "id": "question02",
        "question": "Which of the following is your responsibility?",
        "multiple": true,
        "options": [
            {
                "id": "option02_1",
                "title": "Planning"
            },
            {
                "id": "option02_2",
                "title": "Design"
            },
            {
                "id": "option02_3",
                "title": "Development"
            },
            {
                "id": "option02_4",
                "title": "Testing"
            }
        ]
    },
    {
        "id": "question03",
        "question": "What’s your level of seniority in the organization?",
        "multiple": false,
        "options": [
            {
                "id": "option03_1",
                "title": "Entry Level"
            },
            {
                "id": "option03_2",
                "title": "Mid Level"
            },
            {
                "id": "option03_3",
                "title": "Senior Level"
            }
        ]
    },
    {
        "id": "question04",
        "question": "Do you work with charts and dashboards to make data-backed decisions? ",
        "multiple": false,
        "options": [
            {
                "id": "option04_1",
                "title": "Yes"
            },
            {
                "id": "option04_2",
                "title": "No"
            },
            {
                "id": "option04_3",
                "title": "Others"
            }
        ]
    }
]

​

我用这样的选项来提出问题

​

<div>
   {
    questions && questions.length > 0 &&
    questions.map((question, index) => {
       return (
               <div key={question.id}>
                    <div className='row'>
                         <div className='col-1'>
                             <h2 className='questionTitle'>Q{index + 1}.</h2>
                         </div>
                         <div className='col-11 questionContainer'>
                             <h2 className='questionTitle'>{question.question}</h2>
                         </div>
                      </div>
          </div>
     <div className='optionsList'>
         {
           question.options && question.options.map((option, index) => {
                return (
                        <div key={option.id} className="mb-3">
                            <div className='d-flex align-items-center'>
                            {           
                               question.multiple ?                                                           
                                   <div className="form-check">                                    
                                       <input className="form-check-input form-checkbox" type="checkbox" value={option.title} onChange={() => handleAnswerSelection(option, question.id, true)} id={option.id} />
                                       <label className="form-check-label" htmlFor={option.id}>
                                           {option.title}
                                       </label>
                                   </div>
                                   :
                                   <div className="form-check">
                                     <input className="form-check-input"
                                        type="radio"
                                        name={question.id}
                                        value={option.title}
                                        onChange={() => handleAnswerSelection(option,question.id, false)}
                                        id={option.id}
                                        checked={answersList.length && answersList.filter(ans => ans.id === question.id) && answersList.filter(ans => ans.id === question.id)[0].values[0].title === option.title }
                                     />
                                     <label className="form-check-label" htmlFor={option.id}>
                                          {option.title}
                                     </label>
                                 </div>
                               }
                        </div>
                   </div>
                )
            })
          }
  </div>

​

onChange，我是这样处理选择的

​

    const handleAnswerSelection = (selectedOption, ques, hasMany) => {
        if (hasMany) {
            // 
        }
        else {
            const answer = {
                "id": ques,
                "values": [selectedOption]
            }
            if (answersList.length > 0 && answersList.find(ans => ans.id === ques)) {
                const index = answersList.findIndex(answer => answer.id === ques);
                if (index > -1) {
                    answersList[index].values = [selectedOption];
                }
            }
            else {
                setAnswersList([...answersList, answer]);
            }
        }
        console.log(answersList);
    }

​

但问题是，在改变选项的同时，也没有反映单选按钮的变化。

状态变量是

​

   const [answersList, setAnswersList] = useState([]);

​

请帮助我做错了什么，有什么解决办法？提前感谢

Answer 1

 const handleAnswerSelection = (selectedOption, ques, hasMany) => {
        if (hasMany) {
            // 
        }
        else {
            const answer = {
                "id": ques,
                "values": [selectedOption]
            }
            if (answersList.length > 0 && answersList.find(ans => ans.id === ques)) {
                const index = answersList.findIndex(answer => answer.id === ques);
                if (index > -1) {
                    let newAnswersList = [...answersList];
                    newAnswersList[index].values = [selectedOption];
                    setAnswersList(newAnswersList);
                }
            }
            else {
                setAnswersList([...answersList, answer]);
            }
        }
        console.log(answersList);
    }

会成功的。您应该使用answersList函数更新setAnswersList值。

在下面的语句中，answersList值不会更改。

answersList[index].values = [selectedOption];