Reactjs 为什么React延迟状态变量值更改，但立即更新局部变量

下面是示例代码：

import React, { useState, useEffect } from 'react';

function Lab() {
    let selectedColor = '';
    const cars = [
        { make: 'Tesla', color: 'black' },
        { make: 'Ford', color: 'white' },
        { make: 'Toyota', color: 'red' }
    ];

    const [selectedMake, setSelectedMake] = useState('');

    const handleClick = (e, make, color) => {

        // Update the state variable
        setSelectedMake(make);
        console.log(selectedMake);
        
        // Update the local variable
        selectedColor = color;
        console.log(selectedColor);
    }

    return (
        <div>
            {
                cars.map ((car, i) => <button onClick={e => handleClick(e, car.make, car.color)}>{car.make}</button>) 
            }
        </div>
    );
}

export default Lab;

import React，{useState，useffect}来自“React”；
功能实验室（）{
让selectedColor=''；
常数车=[
{制造：'特斯拉'，颜色：'黑色'}，
{制造：'福特'，颜色：'白色'}，
{品牌：“丰田”，颜色：“红色”}
];
常量[selectedMake，setSelectedMake]=useState（“”）；
常量handleClick=（e、make、color）=>{
//更新状态变量
设置选定的make（make）；
console.log（selectedMake）；
//更新局部变量
selectedColor=颜色；
console.log（selectedColor）；
}
返回(
{
cars.map（（car，i）=>handleClick（e，car.make，car.color）}>{car.make}）
}
);
}
导出默认实验室；

以下是结果的表现：

---

奇怪的是，它会立即更新局部变量，但对于状态变量，它不会立即更新值，而是会延迟一段时间，并且我只会在下一次渲染中获得更新的值？这是什么原因造成的？如何修复？

因为

setSelectedMake

是异步的（），所以您的console.log将显示上一个状态。尝试使用以下命令记录变量：

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

挂载时，当

选择make

change时，它将启动

useffect

中的函数。要避免登录装载，只需使用if语句将其包装：

useEffect(() => {
    if(selectedMake) {
        console.log(selectedMake)
    }
}, [selectedMake]);