React Native API请求首次调用无返回，二次调用才返回问题求助

一、排查并修复URL格式问题 #

你的API URL模板字符串中存在换行和多余空格，这会导致实际请求的URL带有无效空格字符（?后有两个空格），服务器可能无法正确解析参数，进而返回异常结果。

修改searchDeputy函数中的API URL，去除换行和多余空格：

import axios from "axios";

export const searchDeputy = async (stateValue, politicalPartyValue) => {
  if (stateValue === "TODOS" || stateValue === "Estado") {
    stateValue = "";
  }

  if (politicalPartyValue === "TODOS" || politicalPartyValue === "Partido") {
    politicalPartyValue = "";
  }

  // 修复URL：去掉换行和多余空格
  const apiUrl = `https://dadosabertos.camara.leg.br/api/v2/deputados?siglaUf=AM&siglaPartido=&ordem=ASC&ordenarPor=nome`;

  console.log(apiUrl);

  try {
    const response = await axios.get(apiUrl, {
      headers: {
        Accept: "application/json",
      },
    });

    // response.data.dados是同步数据，无需额外await
    const searchDeputyData = response.data.dados;
    return searchDeputyData;
  } catch (error) {
    console.error("Error fetching data:", error);
    return null;
  }
};

二、修正状态更新后的日志逻辑 #

React的状态更新是异步的，你在setSearchDeputyData(response)后立刻console.log(searchDeputyData)，打印的是更新前的旧状态，这会让你误以为数据没返回。

方式1：直接打印返回的响应数据 #

<View className="p-2">
  <Pressable
    onPress={async () => {
      const response = await searchDeputy(stateValue, politicalPartyValue);
      setSearchDeputyData(response);
      // 打印实际返回的响应数据
      console.log("Fetched data:", response);
    }}
  >
    <FontAwesome name="search" size={34} color="black" />
  </Pressable>
</View>

方式2：用useEffect监听状态变化 #

在组件中添加：

useEffect(() => {
  console.log("Updated state data:", searchDeputyData);
}, [searchDeputyData]);

三、实现自动重试机制（备用方案） #

如果修复URL和日志后仍存在偶尔首次请求失败的情况，可以在searchDeputy函数中添加重试逻辑，当首次请求返回null或空数据时自动重试一次：

import axios from "axios";

export const searchDeputy = async (stateValue, politicalPartyValue, retryCount = 0) => {
  if (stateValue === "TODOS" || stateValue === "Estado") {
    stateValue = "";
  }

  if (politicalPartyValue === "TODOS" || politicalPartyValue === "Partido") {
    politicalPartyValue = "";
  }

  const apiUrl = `https://dadosabertos.camara.leg.br/api/v2/deputados?siglaUf=AM&siglaPartido=&ordem=ASC&ordenarPor=nome`;

  console.log(`Attempt ${retryCount + 1}:`, apiUrl);

  try {
    const response = await axios.get(apiUrl, {
      headers: {
        Accept: "application/json",
      },
    });

    const searchDeputyData = response.data.dados;
    // 数据为空且未重试过，触发重试
    if (!searchDeputyData && retryCount < 1) {
      console.log("No data returned, retrying...");
      return searchDeputy(stateValue, politicalPartyValue, retryCount + 1);
    }
    return searchDeputyData;
  } catch (error) {
    console.error(`Error in attempt ${retryCount + 1}:`, error);
    // 请求失败且未重试过，触发重试
    if (retryCount < 1) {
      console.log("Request failed, retrying...");
      return searchDeputy(stateValue, politicalPartyValue, retryCount + 1);
    }
    return null;
  }
};

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