Javascript 从上一个组件渲染中预填充React useState

我试图创建一个

测验

组件，每次呈现一个

问题

，并在用户选择其中一个备选方案时对其进行更改

但是，每次呈现下一个问题时，它都已经从上一个问题中设置了

chosenOption

变量。这是因为在我更改问题之前，我使用

chosenOption

设置了当前问题的新状态，奇怪的是（对我来说）在呈现下一个问题组件时，这已经设置好了

对我来说，

setChosenOption

将仅为当前问题设置，当测验呈现下一个问题时，其

chosenOption

最初将为空。我可能在功能组件的渲染中遗漏了一些东西。。。那么，为什么会发生这种情况呢

提前谢谢

const-quick=（）=>{
常量[currentQuestion，setCurrentQuestion]=React.useState（0）
const[answers，updateAnswers]=React.useState（{}）
常量numberOfQuestions=questions.length
const onchosenoptioncallbackhandler=（{haschosencorrectoroption，chosenOption}）=>{
updateAnswers（prevAnswers=>（{…prevAnswers，[currentQuestion]：hasChosenCorrectOption}））
setCurrentQuestion（currentQuestion+1）
}
返回(
)
}

这里，除了第一个问题外，

'selected Option:“

日志始终显示上一个问题中呈现的

chosenOption

，且不为空

常量问题=（{Question，index，numberOfQuestions，onChoosenOptionCallback}）=>{
const[chosenOption，setChosenOption]=React.useState（null）
log（'selected Option:'，chosenOption）
const hasChosenCorrectOption=chosenOption！==null？（chosenOption==answer）：false
const selectOption=（optionIndex）=>{
setChosenOption（选项索引）
log（'SELECTED:'，optionIndex，hasChosenCorrectOption，chosenOption）
onChoosenOptionCallback（{haschosencorrectoroption，optionIndex}）
}
返回(
{/*我删除了其他不相关的部分。RadioOption位于问题*/}的map（）中
选择选项（索引）}
键={index}
/>
)
}

您的问题是由于未将

键

分配给使用

映射

功能呈现的

问题

组件造成的

省略（即渲染数组中每个元素的唯一属性）会导致各种奇怪的行为，例如您所描述的行为

---

原因是React使用这些索引进行优化，只重新渲染其道具已更改的组件。如果没有键，整个过程将无法正常工作。

您需要为在映射迭代中渲染的每个

问题
组件分配
键
，这样它们将正确地进行特定渲染，使用
索引
作为键，如果映射数组的顺序发生变化，则会导致错误识别组件。使用映射元素的唯一属性作为键。（如身份证等）。看：@GalAbra谢谢你的提示！我最初没有为
问题设置任何
键
，因为它没有通过任何贴图渲染，一次只渲染一个。当
currentQuestion
更改时，我会将新道具传递给组件。但按
键
解决了问题！我原以为，由于道具正在更改，React会将一个新的
问题
及其
chosenOption
设置为null，但它没有设置为null。@pilchard，谢谢！我最终按照你的建议做了，并放置了另一个
键
，而不是使用索引。React不会仅仅因为某个道具发生了变化就卸载和重新装载同一类型的组件，因为它无法知道任何给定道具是如此重要以致于改变了组件的标识-
键
会这样做，使用或不使用循环，还可以在循环中对组件进行重新排序，而无需重新安装。注意：即使您使用
React.memo
来记忆组件，也只会缩短不必要的渲染，而不会在道具更改时导致卸载/重新装载。感谢您的解释和链接！非常感谢：）