如何在Reactjs中使用usestate立即设置变量的值?

v8wbuo2f  于 12个月前  发布在  React
关注(0)|答案(2)|浏览(171)

我有以下几点:

const [type, settype] = useState('')

let handleTypeChange = (e) => {
    settype(e.target.value)
    console.log(type)
}

         return (
                 <div >          
                    <select onChange={handleTypeChange}>
                        <option value="⬇️ Select a type ⬇️"> -- Select a type -- </option>
                        {types.map((type) => <option value={type.Id}>{type.name}</option>)}
                    </select>
                </div>
   
             );
    }
    export default Type;

字符串
问题是,当我检查控制台时,控制台中没有任何内容。由于react中的异步,它还没有设置变量,如果我第二次选择另一个值,我可以看到一个值。
我甚至尝试了settype(x => type),仍然不起作用。
如果我调用settype,我如何确保值“type”立即更新?
更新日期:

Componenet B

function goToPage(url) {
    window.location.href = url;
}
const gotopage = (event) => {
    goToPage(`/Details?Id=${custId}`)
};

Component A  (Details.jsx page)

const [custId, setcustId] = useState('');

useEffect(() => {       
    const queryParameters = new 
                          URLSearchParams(window.location.search)
    const custId = queryParameters.get("custId")
    if (custId) {            
        setcustId(x => custId) 
         getDetails()
    }        
}, [])

   

 const getDetails = () => {

    if (custId != null) 
    {
        getUser();        
    }
}

 const getUser = () => {
    service.getUser(custId)
        .then(function (result) {
            //...do stuff with the result
        });
};


当它到达getUser时,custId中的值为空。我如何确保这里的值是从调用页面更新的?

wsxa1bj1

wsxa1bj11#

在React中,像useState这样的函数的状态更新是异步的。当你调用settype(e.target.value)时,React不会立即更新状态变量类型。状态更新是排队的,React会将其调度到以后处理。
所以,当你在调用settype之后立即记录type时,你并没有记录更新后的值。相反,你记录的是type的当前值,这是旧值,因为状态更新还没有应用。
您可以使用useEffect钩子来验证:

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

字符串
您将看到,当您从对象中选择一个值时,组件将重新呈现,因为状态已更改,您将看到类型变量的正确值。
基本上,您的代码是正确的,您只是不应该期望立即记录type变量并查看更新的值。

c6ubokkw

c6ubokkw2#

您可以使用useEffect钩子和“type”依赖项来记录更新的值,而不是将其写入到DataTypeChange函数中。

let handleTypeChange = (e) => {
        settype(e.target.value);
    }

 useEffect(() => {
        console.log(type); // This will log the updated value
    }, [type]);

字符串

相关问题