React Hooks异步setState导致Quiz应用答题保存跳转顺序异常如何解决？

这里提供三种可行的实现方式，推荐优先级从高到低排列：

方案一：预先计算所有更新值，一次性批量更新（最优解） #

所有需要更新的状态都可以基于点击按钮那一刻的最新状态直接计算得出，不需要依赖React异步更新后的状态值，从根源上避开了异步更新的顺序问题，无额外性能损耗。
实现代码：

const handleSaveAndNext = () => {
  // 1. 构造更新后的当前题目对象
  const modifiedCurrentQuestion = {
    ...currentQuestionInformation,
    selectedAnswer: selectedIndex,
    status: 'answered'
  }

  // 2. 构造更新后的全量题目数组
  const updatedQuestionList = questions.map(item => 
    item.id === modifiedCurrentQuestion.id ? modifiedCurrentQuestion : item
  )

  // 3. 计算下一题相关数据
  const currentIdx = questions.findIndex(q => q.id === currentQuestionInformation.id)
  // 可自行补充最后一题的边界判断逻辑
  const nextQuestion = updatedQuestionList[currentIdx + 1]
  const nextSelectedIdx = nextQuestion.selectedAnswer ?? -1 // 无作答记录时设为默认值

  // 4. 一次性更新所有状态，无顺序依赖问题
  setQuestions(updatedQuestionList)
  setCurrentQuestionInformation(nextQuestion)
  setSelectedIndex(nextSelectedIdx)
}

方案二：使用flushSync强制同步更新 #

如果你的业务逻辑确实需要等待React完成状态更新、DOM渲染后再执行后续操作，可以使用React 18提供的flushSyncAPI，强制包裹内的状态更新同步执行，完成后再运行后续代码。
实现代码：

import { flushSync } from 'react-dom'

const handleSaveAndNext = () => {
  // 强制当前题目、全量数组的更新同步执行
  flushSync(() => {
    const modifiedCurrentQuestion = {
      ...currentQuestionInformation,
      selectedAnswer: selectedIndex,
      status: 'answered'
    }
    setQuestions(prev => prev.map(q => q.id === modifiedCurrentQuestion.id ? modifiedCurrentQuestion : q))
  })
  // 上述状态更新已全部完成，再执行跳转
  goToNextQuestion()
}

注意：flushSync会跳过React的批量更新优化，存在一定性能损耗，非必要不优先使用。

方案三：ref标记配合useEffect（备选方案） #

如果不想改动现有逻辑结构，可以新增ref标记是否需要在题目数组更新后触发跳转，仅在点击按钮时将标记设为true，避免每次数组更新都触发跳转。
实现代码：

// 新增标记ref
const needJumpToNext = useRef(false)

const handleSaveAndNext = () => {
  // 标记本次更新后需要跳转
  needJumpToNext.current = true
  // 执行题目数组更新逻辑
  const modifiedCurrentQuestion = {
    ...currentQuestionInformation,
    selectedAnswer: selectedIndex,
    status: 'answered'
  }
  setQuestions(prev => prev.map(q => q.id === modifiedCurrentQuestion.id ? modifiedCurrentQuestion : q))
}

useEffect(() => {
  // 仅标记为需要跳转时执行跳转逻辑
  if (needJumpToNext.current) {
    goToNextQuestion()
    needJumpToNext.current = false
  }
}, [questions])

该方案需要额外维护ref和useEffect，维护成本更高，仅作为备选。

内容的提问来源于stack exchange，提问作者Banana Bamboo