useState 钩子设置的值与传递给 setState() 的值不同答案

【问题标题】：useState hook setting different value than what is passed into setState()useState 钩子设置的值与传递给 setState() 的值不同
【发布时间】：2023-02-11 14:41:41
【问题描述】：

我有一个带有一些选项的选择菜单。当我更改选择菜单中的选项时，我使用 setNewValue(event.target.value) 设置 currentValue 的状态并将变量的新值记录到控制台。

但是，为变量设置的值与我传递给 setNewValue 的值不同。

const classGrades = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [classGrade, setClassGrade] = useState(1)
let classSelect = () => {
return (
        <div>
            <select value={classGrade} onChange={(e) => {
                setClassGrade(e.target.value)
                console.log(`I selected ${e.target.value}, so classgrade is now ${classGrade}`)
            }}>
                {classGrades.map(g => <option key={g} value={g}>{g}</option>)}
            </select>
        </div>
    )
}

【问题讨论】：

标签： reactjs react-hooks jsx onchange setstate

【解决方案1】：

这不是反应的工作方式，当您更新 useState 挂钩时，它的值不会立即更改，但组件会重新渲染，并且在这个新渲染中，该值将被更新，因此在您的情况下您不会获得新值classGrade 因为组件还没有重新渲染。

console.log 像这样：

return (
  <div>
  {console.log('this is a new render ! in the last one I have updated classGrade so for this one its value is :',classGrade)} 
    <select value={classGrade} onChange={(e) => {
        setClassGrade(e.target.value)
        console.log(`I selected ${e.target.value}, but since the component didn't rerenderet yet, classGrade is still ${classGrade} `)
        }}>
        {classGrades.map(g => <option key={g} value={g}>{g}</option>)}
     </select>
  </div>
);

【讨论】：