React Native - API 请求在第一次调用时在第二次调用中返回数据

Question

有人可以帮我解决这个问题吗？我试图制作一个应用程序，让人们能够访问政治数据并利用它做出更好的选择。通过某种方式，数据仅在第二次调用中返回，通常在第一次调用中返回。但并非总是如此。

我对 apiUrl 进行了硬编码，因此您不需要自己完成并丢弃任何钩子问题。

这是我的 api 助手/服务：

import axios from "axios";

export const searchDeputy = async (stateValue, politicalPartyValue) => {
  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(apiUrl);

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

const searchDeputyData = await response.data.dados;

return searchDeputyData;
  } catch (error) {
    console.error("Error fetching data:", error);
    return null;
  }
};

我正在使用以下代码调用该函数：

<View className="p-2">
      <Pressable
        onPress={async () => {
          const response = await searchDeputy(
            stateValue,
            politicalPartyValue
          );

          await setSearchDeputyData(response);
          console.log(searchDeputyData);
        }}
      >
        <FontAwesome name="search" size={34} color="black" />
      </Pressable>
    </View>

我已经尝试延迟 api 调用并在没有异步的情况下调用它，尝试使用 fetch 而不是 axios，但我得到了相同的结果。

有人遇到过这样的问题吗

我宁愿只拨打一次电话，但如果第一个电话没有返回数据，我会尝试拨打第二次电话。

Answer 1

如果你使用 JavaScript，你应该知道 useState 是异步的。当您设置变量时，它不会立即更新。

这就是为什么你的:

console.log(searchDeputyData);

不会显示您期望的值。即使你添加一个await

为了解决这个问题，您可以创建一个 useEffect 函数，当变量的状态发生变化时将触发该函数：

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