我使用 nodejs 构建了一个后端服务器 API，并将其链接到我现有的数据库（该数据库充满了空值），然后将后端服务器链接到我的前端 React Native 项目以在我的屏幕上显示数据 所以我试图过滤掉空值，这样我的应用程序就只显示有值的值（每次都是标题、图片和摘录），正如您在下面的屏幕中看到的那样，我只得到其中一个，有时什么都没有。 所以我有一种方法可以使用 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 作为后端服务器，我的代码如下所示：

app.get("/articles", async (req, res, next) => {
  try {
    //aritcles with null values
    const articles = await Article.find();
    const articlesResponse = articles.filter((item) => {
      let isValidObject = true; // item is an article  it has title img excerpt keys
      for (let key in item) {
        if (!item[key]) isValidObject = false;
      }
      return isValidObject;
    });
    res.json(articlesResponse);
    //res.json(articles);
  } catch (err) {
    return res.status(422).send(err.message);
  }
});

在我的 server.js 文件中，我像这样调用 articleRouter：app.use("/articles", articleRouter);