从先前的组件渲染中预填充的 React useState

Question

我正在尝试创建一个 Quiz 组件渲染一个 Question 并在用户选择其中一个选项时更改它。

但是，每次呈现下一个问题时，它已经从上一个问题中设置了 chosenOption 变量。发生这种情况是因为在我更改问题之前，我用 chosenOption 设置了当前问题的新状态，奇怪的是（对我来说）这在呈现下一个问题组件时已经设置好了。

对我来说，setChosenOption 将仅为当前问题设置，当测验呈现下一个问题时，其 chosenOption 最初将为空。我可能在功能组件的渲染方式中遗漏了一些东西......那为什么会这样？

提前致谢！

const Quiz = () => {
    const [currentQuestion, setCurrentQuestion] = React.useState(0)
    const [answers, updateAnswers] = React.useState({})
    const numberOfQuestions = questions.length
    const onChoosenOptionCallbackHandler = ({ hasChosenCorrectOption, chosenOption}) => {
        updateAnswers(prevAnswers => ({...prevAnswers, [currentQuestion]: hasChosenCorrectOption }))
        setCurrentQuestion(currentQuestion + 1)
    }

    return (
        <QuizBackground>
            <QuizContainer>
                <Question
                     question={questions[currentQuestion]}
                     index={currentQuestion}
                     numberOfQuestions={numberOfQuestions}
                     onChoosenOptionCallback={onChoosenOptionCallbackHandler}
                 />
            </QuizContainer>
        </QuizBackground>
    )
}

这里，除了第一个问题，'Chosen Option: ' 日志始终显示前一个问题呈现的 chosenOption 而不是空值。


const Question = ({ question, index, numberOfQuestions, onChoosenOptionCallback }) => {
    const [chosenOption, setChosenOption] = React.useState(null)
    console.log('Chosen Option: ', chosenOption)
    const hasChosenCorrectOption = chosenOption !== null ? (chosenOption == answer) : false

    const selectOption = (optionIndex) => {
        setChosenOption(optionIndex)
        console.log('SELECTED: ', optionIndex, hasChosenCorrectOption, chosenOption)
        onChoosenOptionCallback({ hasChosenCorrectOption, optionIndex })
    }

    return (
          {/* I removed other parts not relevant. The RadioOption goes inside a map() from the question alternatives */}
          <RadioOption
              questionName={questionName}
              option={option}
              chosen={chosenOption === index}
              onSelect={() => selectOption(index)}
              key={index}
          />
    )
}

Answer 1

您的问题是由于没有将 key 分配给您的 Question 组件，这些组件正在使用 map 函数呈现。

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

原因是 React 使用这些索引进行优化，通过仅重新渲染 props 已更改的组件。没有密钥，整个过程将无法正常工作。

从先前的组件渲染中预填充的 React useState

React useState pre populated from previous component render

javascript

reactjs

use-state