ReactJS:不能发送最后一个单选按钮值

Question

我尝试在ReactJS中创建一个测验应用程序。我在旋转木马中注入了一个表单。每个滑块只有一个带有单选按钮的问题。

return (
<React.Fragment>
<Slider {...settings} ref={sliderRef}>
{data.map((question, index) => (
<FormGroup inline className="form-group-center">
{
[0, 1, 2].map((i) => (
<Label check className="me-md-5">
<Input type="radio"
id={question.choices[i]}
name={question.id}
onClick={e => {handleRadioClick(e)}}
value={question.choices[i]}/>
{question.choices[i]}
</Label>
))
}
</FormGroup>
))}
</Slider>
</React.Fragment>
)

当用户点击单选按钮时，答案将被设置，下一个问题将自动出现在新的滑动卡上。

const [answers, setAnswers] = useState([]);
const handleRadioClick = (event, index) => {
const name = event.target.name;
const value = event.target.value;
const lastObj = Object.values(data)[Object.values(data).length - 1].id;
// If the question is the last one, post all answers in an API request. 
if (lastObj == name) {
console.log(answers) // Does not show the last answer at first view
handleSubmit(); // Post API request
}
setAnswers(values => ({...values, [name]: value}))
// When user clicks on a radio button next slider will appear. It runs slickNext();
next();
}

在API请求中，除最后一个答案外，所有答案都成功发送。

一旦我想在if (lastObj == name)块中添加console.log(answers)，最后一个问题的答案不会在第一个单选按钮单击中显示。

但是，当我通过单击另一个单选按钮来更改单选按钮的值时，将显示第一个单击的值。也就是说，最后一个问题的选择答案只能在第二次点击时显示。

如何在第一次尝试时发送所有答案?

Answer 1

问题是您在添加状态中的最后一个答案之前调用了函数handleSubmit，解决方案是在调用函数handleSubmit之前添加答案，不要忘记将参数答案添加到函数handleSubmit，因为setState是异步的，您可能无法获得状态的最新版本。

const [answers, setAnswers] = useState([]);
const handleRadioClick = (event, index) => {
const name = event.target.name;
const value = event.target.value;
const lastObj = Object.values(data)[Object.values(data).length - 1].id;

const answersObject = {...answers, [name]: value} //<== do this first
// If the question is the last one, post all answers in an API request. 
if (lastObj == name) {
console.log(answersObject) // Does not show the last answer at first view
handleSubmit(answersObject); // Post API request
}
setAnswers(answersObject)
// When user clicks on a radio button next slider will appear. It runs slickNext();
next();
}