Javascript 无法使用react中的挂钩在本地状态中设置响应数据

我正在使用功能组件，并且是一名初学者。我成功地从API接收到响应，但当我将其设置为本地useState变量时，它仍然为空。我无法理解如何修复此问题

方法1：

const [sites,setSites]=useState([]);
useEffect(()=>{
    getAllSites().then(res=>{
      console.log("res",res.sites);//response received successfully
      setSites(res.sites);
      console.log(sites);//return empty array
    })
    .catch(err=>{
      console.log("Error:",err);
    })
  },[])

方法2：

const [sites,setSites]=useState([]);
useEffect(()=>{
    getAllSites().then(res=>{
      console.log("res",res.sites);
    },(res)=>{
     setSites(res);//thought maybe because of async nature, so tried using callback but still empty 
})
    .catch(err=>{
      console.log("Error:",err);
    })
  },[])

---

有人能帮我解决这个问题吗？

你做的一切都是对的。但您无法在站点中看到立即更新的值（显然是const），因此您将在下一个渲染周期中看到，此时您的功能组件将运行，react将为站点分配新值。一旦状态更新，将发生新的重新招标。只需将

console.log（sites）

添加到功能组件的顶层

const [sites,setSites]=useState([]);
console.log(sites);
useEffect(()=>{...},[]);

---

react中的更新状态不会同步发生。这意味着，当您调用

setSites

时，状态将不会得到更新，而更改或更新的状态将在下一次渲染中可用

为了查看这是否有效，我们可以通过将

state

变量作为依赖项传递来使用

useffect

钩子

const{useState，useffect}=React；
常量getAllSites=（）=>{
返回新承诺（res=>{
设置超时（（）=>{
返回res（{sites:[{id:1，name:“Google”}，{id:2，name:“Facebook”}]}）；
}, 500)
})
}
常量应用=（）=>{
const[sites，setSites]=useState（[]）；
useffect（（）=>{
getAllSites（）。然后（res=>{
//console.log（“res”，res.sites）；//成功接收到响应
设置位置（现场）；
})
.catch（错误=>{
log（“错误：”，err）；
})
},[]);
useffect（（）=>{
//这将打印在挂载上，以及当网站发生任何变化时`
控制台日志（站点）；
}，[网站]）
返回App

}
render（，document.getElementById（“react”）
Omg在过去的半个多小时里，我一直在琢磨这个问题，尝试不同的方法让它发挥作用。非常感谢！！