React Native API请求首次返回undefined后续正常的问题排查

核心问题 #

1. 异步执行顺序错误：fetch是异步操作，你的makeRequest函数会在请求完成前就直接返回infos参数（此时还是初始的空数组），所以首次调用得到的是初始状态而非请求结果。
2. 组件渲染逻辑问题：直接在组件顶层调用makeRequest会导致组件每次渲染都触发请求，setInfos更新状态后会再次渲染，进而再次调用请求——第二次及之后能拿到结果，其实是前一次请求的结果在后续渲染中生效了。
3. 你误以为“首次请求没进入then逻辑”，实际上是then逻辑在函数return之后才执行，只是此时函数已经返回了初始值，你没等到异步操作完成。

修复代码 #

方案1：将makeRequest改为异步函数

exports.makeRequest = async function() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

组件中用useEffect控制请求时机，避免重复触发：

const [infos, setInfos] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    try {
      const data = await makeRequest();
      setInfos(data);
    } catch (err) {
      // 按需处理错误
    }
  };
  fetchData();
}, []); // 空依赖数组确保只在组件挂载时调用一次

方案2：保留传入setInfos的写法（移除无效return）

如果要维持原有传参逻辑，去掉无意义的return，因为返回的infos永远是旧值：

exports.makeRequest = function(setInfos) {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((data) => {
      setInfos(data);
      console.log('请求完成，状态已更新'); // 可验证then逻辑确实执行
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}

组件中同样用useEffect调用：

const [infos, setInfos] = useState([]);

useEffect(() => {
  makeRequest(setInfos);
}, []);

关键注意点 #

• React的useState更新是异步的，调用setInfos后无法立刻获取新值。
• 异步操作（如fetch）必须等待完成后才能获取结果，不能同步return未完成的异步操作结果。
• 组件顶层代码会在每次渲染时执行，异步请求必须放在useEffect中，通过依赖数组控制执行时机。

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