Question

我正在使用 useState 钩子，但该钩子似乎无法正常工作。当我最初单击我的一个单选按钮时，它什么也不记录，但是在我第二次单击后，它会记录我单击的前一个。每次我点击任何按钮时，它都会记录我之前点击的按钮。 #sidenote：（我导入的“信息”是一个对象数组，每个“incorrect_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])

这样您就可以看到 value 的值何时发生变化

Answer 2

reactjs 中的 setState 函数（在你的例子中是 setValue）是一个异步函数，它会在事件处理程序（handleChange）结束时更新状态，所以 value 变量仍然会引用事件处理程序中的先前状态（handleChange） ).

尝试在返回的JSX之前添加console.log，然后点击input radio你会在事件处理程序执行后看到log

const handleChange = (e) => {
    setValue(e.target.value);
    console.log(value);
}
console.log("value after handle event",value);
return (

有关 hou reactjs 更新状态的更多信息，请查看 here

为什么 useState 钩子会像上一次点击一样改变状态？

2 个答案: