data.map 不是函数（未定义）

Question

我正在使用 React Native 和 Firebase 制作一个食谱应用程序。我之前向实时数据库添加了一些 JSON 数据。它与 arr.map() 配合得很好。但是当我用我的项目将数据写入实时数据库时，它说 data.map 不是一个函数

这是我从实时数据库调用的代码

import { ScrollView, SafeAreaView, FlatList } from "react-native";
import React, { useEffect, useState } from "react";
import { ref, onValue } from "firebase/database";
import { database } from "../firebaseConfig";
import HomepageCard from "../components/HomepageCard";

export default function AllRecipes() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  function getData() {
    const db = database;
    const recipes = ref(db, "tarifler/");
    onValue(recipes, (snapshot) => {
      setData(snapshot.val());
    });
    setIsLoading(false);
  }

  useEffect(() => {
    getData();
  }, []);
  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={{ alignItems: "center" }}>
data.map((recipe) => {
              const { ad, id, gorsel, kategori } = recipe;
              return (
                <HomepageCard
                  key={id}
                  ad={ad}
                  gorsel={gorsel}
                  kategori={kategori}
                />
              );
            }) </ScrollView>
    </SafeAreaView>
  );
}

这是我将数据写入实时数据库组件

import { View, Text, Pressable, Alert } from "react-native";
import React, { useState } from "react";
import { ScrollView, TextInput } from "react-native-gesture-handler";
import { ref, set } from "firebase/database";
import { database } from "../firebaseConfig";
import "react-native-get-random-values";
import { nanoid } from "nanoid";

export default function AddRecipe() {
  const id = nanoid();
  const [data, setData] = useState({
    ad: "",
    gorsel: "",
    kategori: "",
    tarif: "",
    malzemeler: "",
  });
  const handleOnPress = () => {
    const db = database;
    set(ref(db, "tarifler/" + id), {
      id: id,
      ad: data.ad,
      kategori: data.kategori,
      gorsel: data.gorsel,
      yapılış: data.tarif,
      malzemeler: data.malzemeler.split(","),
    });
    
  };
  return (
    <ScrollView style={{ flex: 1 }} className="bg-white gap-y-6 px-5 pt-10">
      <Text className="text-2xl font-bold">Add Recipe</Text>
      <View className="gap-y-5">
        <TextInput
          onChangeText={(val) => (data.ad = val)}
          className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Ad"
        />
        <TextInput
          onChangeText={(val) => (data.gorsel = val)}
          className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Görsel Linki"
        />
        <TextInput
          onChangeText={(val) => (data.kategori = val)}
          className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Kategori"
        />
        <TextInput
          onChangeText={(val) => (data.tarif = val)}
          multiline={true}
          numberOfLines={6}
          className="text-xl h-[200px] p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Tarif"
        />
        <TextInput
          onChangeText={(val) => (data.malzemeler = val)}
          multiline={true}
          numberOfLines={6}
          className="text-xl h-[200px] p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Malzemeler"
        />
      </View>
      <Pressable onPress={handleOnPress} className="bg-pink-600 rounded-full">
        <Text className="text-center text-xl font-medium text-white py-3">
          Tarifi Ekle
        </Text>
      </Pressable>
    </ScrollView>
  );
}

当我从实时数据库中删除新添加的数据时，它再次正常工作

Answer 1

从当前代码的外观来看，我希望您使用一些数组值来调用

setData()

，但是您使用

snapshot.val()

的输出（可能是一个对象）来调用它。对象没有

.map()

方法（因此是你的错误）。检查

snapshot.val()

返回的内容，如果它是正确的对象结构，请执行类似

setData([...data, snapshot.val())

的操作。

Answer 2

请检查以下代码

setData(snapshot.val());

验证snapshot.val()返回的是数组而不是对象，对象没有Map函数