为什么USESTECT钩子将状态改变为上一次点击？[副本]

Question

我正在使用USESTEAT钩子，似乎钩子不正常工作。当我单击一个单选按钮时，最初它不会记录任何内容，但在我第二次单击后，它会记录我单击的前一个单选按钮。每次我单击任何按钮，它都会记录我以前单击的按钮。#sideNote:（我导入的'info'是一个对象数组，每个'increct_answers'属性都有一个数组作为值）。下面是我的代码：

import React, {useState} from 'react'
import { info } from "./data";

const Quiz = () => {

const [i, setI] = useState(0);
const [value, setValue] = useState('');

const {correct_answer, incorrect_answers} = info[i]
const arr = [correct_answer, ...incorrect_answers].sort((a, b) => a.length - b.length);
console.log(arr)

const handleSubmit = (e) => {
    e.preventDefault();
    setI(i + 1);
}

const handleChange = (e) => {
    setValue(e.target.value);
    console.log(value);
}

return (
    <div className="quiz">
        <form className='quiz__form' onSubmit={(e) => handleSubmit(e)}>
            <div className="form__body" >
                {arr.map((item, index) => {
                    return (
                        <div className="form__item" key={index}>
                            <label htmlFor={`option-${index}`}>
                                <input 
                                    type="radio" 
                                    name="options" 
                                    id={`option-${index}`}
                                    value={item}
                                    onClick={(e) =>  handleChange(e)}
                                /> {item}
                            </label>
                        </div>
                    )
                })}
            </div>  
        </form>
    </div>
)
}

Answer 1

setvalue是异步的。所以你将不得不等待看到变化。要看到更改，可以做的一件事是添加以下代码

useEffect(() => {
    console.log(value)
}, [value])

这样，您就可以看到值的值何时更改