next.js useState更新,但当我调用状态后,它是以前的版本?[副本]

ifmq2ha2  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(116)

此问题已在此处有答案

The useState set method is not reflecting a change immediately(17回答)
5天前关闭。
我有以下刷新状态的函数

const refreshAfterCreate = async () => {
      try {
        const res = await fetch(process.env.NEXT_PUBLIC_MICROSERVICE_COMPANY_URL + '/companies',         {method: 'GET'});
        const data = await res.json();
        await setCompanies(data);
      } catch (error) {
        console.error('Error al realizar el fetch:', error);
      }
      try {
        const res = await fetch(process.env.NEXT_PUBLIC_MICROSERVICE_SERVICE_URL + '/services',        {method: 'GET'});
        const data = await res.json();
        await setServices(data);
      } catch (error) {
        console.error('Error al realizar el fetch:', error);
      }
    };

使用await调用函数后,我console.log(companies)和console.log(services),并且是以前的数据。
我尝试添加这些useEffects

useEffect(() => {
  console.log('Companies Updated', companies);
}, [companies]);

useEffect(() => {
  console.log('Services Updated', services);
}, [services]);

这些工作是因为它记录更新的值。当我调用上面的函数并记录所有内容时,它首先更新值,然后返回到以前的状态,这张图片有助于理解。

我该怎么解决这个问题?

wlsrxk51

wlsrxk511#

这是因为setState不会立即执行,如果您想访问最近更新的数据,您有两种方法

  • 使用useEffect
  • 或者,如果您希望在setState之后立即访问数据(setState下面的1行),请使用传递给setCompanies或setServices的相同值

额外提示:不要使用await setState,因为setState不返回promise,没有必要这样做

相关问题