从API过滤空值

API过滤空值"/>

从API过滤空值

我使用nodejs构建了后端服务器API并将其链接到我拥有的现有数据库（该数据库充满了空值），然后将后端服务器链接到我的前端react native项目以在屏幕上显示数据所以我试图过滤掉空值，以便我的应用仅显示具有值的值（标题分别是img和摘录），如您在下面的屏幕中看到的那样，我只能得到一个或另一个，有时什么也没有。所以我有一种方法可以使用axios或使用某种过滤功能

这是我在钩子中使用的代码：useArticle.js

import { useEffect, useState } from "react";
import articles from "../api/articles";
import axios from "axios";
export default () => {
  const [docs, setDocs] = useState([]);
  const [errorMessage, setErrorMessage] = useState("");
  const loadApi = async () => {
    // wait for a reponse to get back once it does with some data we asign that data to the reponse variable
    try {
      const response = await axios.get("http://192.168.1.2:3001/articles");
      //console.log(response.data);
      setDocs(response.data.data);
    } catch (err) {
      setErrorMessage("Something went wrong");
    }
  };
  // bad code
  //searchApi("pasta");
  useEffect(() => {
    loadApi();
  }, []);

  return [loadApi, docs, errorMessage];
};

这是我在TrackCreateScreen.js上使用的代码

import React, { useState } from "react";
import { View, Text, StyleSheet, ScrollView, FlatList } from "react-native";
import SearchBar from "../components/SearchBar";
import useResults from "../hooks/useResults";
import ResutlsList from "../components/ResultsList";
import ResutlsListVer from "../components/ResultsListVer";
import useArticles from "../hooks/useArticles";
const TrackCreateScreen = () => {
  const [loadApi, docs, errorMessage] = useArticles();
  /*
  const filterNull = (docs) => {
    return docs.filter((doc) => {
      if ((doc.title = ".")) return doc.title;
    });
  };
  console.log(filterNull(docs)); */

  return (
    <View>
      <FlatList
        data={docs}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={{ backgroundColor: "#abc123", padding: 10, margin: 10 }}>
            <Text style={{ color: "#fff", fontWeight: "bold" }}>
              {item.title}
            </Text>
            <Text style={{ color: "#fff" }}>{item.excerpt}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    //flex: 1, // when ever we have a content that is being cut off or expanding off the screen
  },
  Text: {
    fontSize: 32,
    alignItems: "center",
  },
});
export default TrackCreateScreen;

假设您使用Express框架，以下是一些快速代码供您使用：