setState UI不更新UI

Question

我试图在UseEffect中获取多个端点，并根据结果在UI上显示数据(化身、用户名等)

问题是，在fetch()调用useEffect中接收到的数据实际上返回了正确的数据，但是当试图在UI代码中访问它时，它将不会出现。

正如您在我的代码中所看到的，我有isLoading状态，但我觉得then操作并没有真正等到响应出现。加载屏幕将显示0.5秒，但当正常屏幕弹出，用户名，化身等是空的。

那么，我如何使UI等待直到useEffect完全加载了数据，然后显示它呢？

UserProfile.tsx

  React.useEffect(() => {
    AsyncStorage.getItem(LOGGED_IN_USER).then((userSteamID) =>
      fetch(USER_PROFILE + userSteamID)
        .then((response) => response.json())
        .then((json) => json.steamId)
        .then((steamId) => {
          fetch(USER_INVENTORY + steamId)
            .then((response) => response.json())
            .then((json) => {
              console.log(json);
              setProfileInfo(json);
              setSteamID(json.steamId);
              setInventoryValue(json.value);
            })
            .catch((err) => alert(err))
            .finally(() => setLoading(false));
        })
    );
  }, []);

之后试着使用它：

  if (loading) {
    return (
      <View
        style={{
          height: "100%",
          justifyContent: "center",
          backgroundColor: Colors.dark.background,
        }}
      >
        <ActivityIndicator
          size="large"
          style={{ backgroundColor: Colors.dark.background }}
        />
        <Text
          style={{
            color: Colors.dark.text,
            marginTop: 10,
            alignSelf: "center",
          }}
        >
          retrieving userdata...
        </Text>
      </View>
    );
  } else {
    return (
      <Text>{inventoryValue}</Text> // avatar, etc. wont work as well
)

我从LoginScreen.tsx导航到它的方式如下：

  onPress={async () => {
          let result = await startAuth();
          if (result.type == "success") {
            setLoggedInUser(result.steamID);
            console.log("ID: " + result.steamID);
            navigation.navigate("UserProfile");
          }

Answer 1

创造承诺链

React.useEffect(() => {
  AsyncStorage.getItem(LOGGED_IN_USER).then((userSteamID) =>
    fetch(USER_PROFILE + userSteamID)
      .then((response) => response.json())
      .then((json) => json.steamId)
      .then((steamId) => fetch(USER_INVENTORY + steamId))
      .then((response) => response.json())
      .then((json) => {
        setProfileInfo(json);

        // This can be avoided, already available in profileInfo
        setSteamID(json.steamId); 
        setInventoryValue(json.value);       
      })
      .catch((err) => alert(err))
      .finally(() => setLoading(false))
  );
}, []);

带异步/等待

React.useEffect(() => {
  const init = async () => {
    try {
      const userSteamID = await AsyncStorage.getItem(LOGGED_IN_USER);
      const { steamId } = await fetch(USER_PROFILE + userSteamID).then((r) =>
        r.json()
      );
      const json = await fetch(USER_INVENTORY + steamId).then((r) => r.json());
      setProfileInfo(json);

      // This can be avoided, already available in profileInfo
      setSteamID(json.steamId);
      setInventoryValue(json.value);
    } catch (error) {
      alert(error);
    } finally {
      setLoading(false);
    }
  };
  init();
}, []);