当我加载屏幕时，react native 中的 fetch API 调用不起作用答案

【问题标题】：fetch API call in react native is not working when I load the screeen当我加载屏幕时，react native 中的 fetch API 调用不起作用
【发布时间】：2020-11-05 12:36:58
【问题描述】：

我已经制作了一个反应原生的应用程序。我的应用程序对我的网络服务器进行 API 调用，然后基于此显示信息。问题是当我第一次加载这个屏幕时......我得到了加载屏幕并且信息以它应该的方式显示但是当我离开屏幕然后回到屏幕时，它什么都不显示并且我的数组包含items 是空的，因此我认为当我离开屏幕然后返回时 API 调用出现问题。

我在我的应用程序中使用 React 导航 5。

export default function ({ navigation }) {
  const [openQueries, setOpenQueries] = useState([]);
  const [isLoading, seIsLoading] = useState(true);
  const open_queries = [];

  function getOpenQueries() {
    var retrieveData = async () => {
      try {
        var value = await AsyncStorage.getItem("user");
        var data = JSON.parse(value);
        return data.user._id;
      } catch (error) {
        alert(error);
      }
    };
    retrieveData().then((user) => {
      fetch(URL + "/api/contact/open_queries", {
        method: "POST",
        body: "user=" + user + "&status=open",
        headers: { "Content-type": "application/x-www-form-urlencoded" },
      })
        .then((response) => {
          return response.json();
        })
        .then((responseJson) => {
          if (responseJson.error === null) {
            setOpenQueries(responseJson.open_queries);
            seIsLoading(false);
          }
        });
    });
  }

  getOpenQueries();

  openQueries.forEach((query) => {
    open_queries.push(
      <TouchableOpacity
        onPress={() =>
          navigation.navigate("Chat", {
            id: query._id,
            title: query.title,
            query: query,
            showInput: true,
          })
        }
      >
        <View style={styles.inboxItem}>
          <Text style={styles.inboxTitle}>{query.title}</Text>
          <Text style={styles.inboxSubtext}>
            {query.chats[query.chats.length - 1].chat}
          </Text>
          <View style={styles.lineBreak}></View>
        </View>
      </TouchableOpacity>
    );
  });


  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Contacts</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.navigate("NewQuery")}
      >
        <Text style={styles.text}>Start a new query</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate("ClosedQueries")}>
        <View style={styles.button}>
          <Text style={styles.text}>Closed Queries</Text>
        </View>
      </TouchableOpacity>
      <Text style={styles.subTitle}>Open Queries</Text>
      {isLoading ? (
        <View style={styles.loader}>
          <Code />
        </View>
      ) : (
        <ScrollView style={{ paddingTop: 10 }}>
          {openQueries.length > 0 ? (
            open_queries
          ) : (
            <Text style={styles.noQuery}>No Open Queries found</Text>
          )}
        </ScrollView>
      )}
      <ScrollView></ScrollView>
      <BottomNavigation navigation={navigation} active={"contact"} />
    </SafeAreaView>
  );
}

【问题讨论】：

标签： react-native api fetch-api

【解决方案1】：

试试这个方法

export default function ({ navigation }) {
  const [openQueries, setOpenQueries] = useState([]);
  const [isLoading, seIsLoading] = useState(true);
  const [open_queries_views, setOpenQueriesViews] = useState([]);

  function getOpenQueries() {
    ....
  }

  // Similar to componentDidMount
  useEffect(() => {
    getOpenQueries();
  });

  function renderViews(){
    const open_queries = [];

    openQueries.forEach((query) => {
     open_queries.push(
      <TouchableOpacity> ... </TouchableOpacity>
    );
   });
   setOpenQueriesViews(open_queries); // set state here to auto reflect on view
  }

  return (
    <SafeAreaView style={styles.container}>
      ....
        <ScrollView style={{ paddingTop: 10 }}>
          {open_queries_views.length > 0 ? (
            open_queries_views
          ) : (
            <Text style={styles.noQuery}>No Open Queries found</Text>
          )}
        </ScrollView>
      .....
    </SafeAreaView>
  );
}

【讨论】：