React Native中useState返回空数组但console.log正常的问题排查

我使用React Native的经验有限，此前类似API请求都能正常工作，但本次遇到问题。以下是包含状态变量和API获取函数的代码：

export default function App() {
  const [users, setUsers] = useState([]);
  const [villages, setVillages] = useState([]);

  async function getUsers() {
    const response = await fetch("https://localhost:7108/PlayersAPI/1");
    const users = await response.json();
    setUsers(users[0]);
    console.log("Before calling setVillages:", users[0].villages[0]); // log the value before calling setVillages
    setVillages(users[0].villages[0].villageId);
    console.log(villages);
    console.log("After calling setVillages:", users[0].villages[0]); // log the value after calling setVillages
  }

该函数通过useEffect执行：

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

API返回包含玩家及多个村庄的数组数据，users状态可正常获取第一个玩家的所有信息，console.log(users[0].villages[0])能输出预期的村庄对象，但执行setVillages(users[0].villages[0].villageId)后，console.log(villages)始终返回空数组[]，前后打印村庄对象的日志均正常，请问问题出在哪里？

1. React状态更新是异步的，无法立即获取新值 #

React的useState更新函数是异步批量执行的，调用setVillages后，当前代码执行栈里的villages变量依然保持更新前的旧值（也就是初始的空数组[]）。你在setVillages之后立刻console.log(villages)，自然看不到新值。

同样，useEffect里的console.log(villages)会在组件首次渲染时执行，此时getUsers是异步函数，API请求还没完成，setVillages根本没执行，所以打印的也是初始空数组。

2. 状态类型不匹配（潜在问题） #

你初始化villages为数组[]，但调用setVillages时传入的是单个villageId（应该是字符串或数字类型），这会导致状态类型混乱，后续使用villages时可能出现预期外的问题。如果只需要存单个ID，建议把初始值改成null或undefined；如果要存储多个ID，应该用数组包裹：

setVillages([users[0].villages[0].villageId]);

正确查看更新后的状态 #

要确认villages是否真的更新，你可以添加一个监听villages变化的useEffect：

useEffect(() => {
  console.log("更新后的villages值:", villages);
}, [villages]); // 只有当villages变化时才执行

这样每次villages状态更新后，都会打印出最新的值。

另外，如果你需要在getUsers里基于更新后的villages做后续操作，不能直接在setVillages之后写逻辑，而是要依赖这个useEffect，或者直接使用users[0].villages[0].villageId这个原始值（既然你已经拿到了，没必要等状态更新）。

内容的提问来源于stack exchange，提问作者linkedby