TypeError：undefined不是一个函数（在'... data.map ...'附近）

Question

我是React Native的初学者。我有一个与以下代码有关的问题。我正在使用.map来显示数组。当我启动我的应用程序时（使用Expo），我收到此错误消息：TypeError：undefined不是一个函数（在'... data.map ...'附近）。

这是我的代码：

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Button, AsyncStorage } from "react-native";
import { useNavigation } from "@react-navigation/core";
import { TouchableOpacity } from "react-native-gesture-handler";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native-paper";
import axios from "axios";

function ProductsScreen() {
  const navigation = useNavigation();
  const [data, setData] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const data = await AsyncStorage.getItem("userData");

      setisLoading(false);
      setData(data);
    };
    fetchData();
  }, []);

  return isLoading ? (
    <ActivityIndicator />
  ) : (
    data.map((data, index) => {
      <>
        key ={index}
        <Text> {data.products_name_fr} </Text>
        <Text> {data.brands} </Text>
        <Text> {data.image_url} </Text>
        <View style={styles.scan}>
          <MaterialCommunityIcons
            name="barcode-scan"
            size={40}
            color="black"
            onPress={() => {
              navigation.navigate("CameraScreen");
            }}
          />
        </View>
      </>;
    })
  );
}
const styles = StyleSheet.create({
  products: {
    alignItems: "center",
    justifyContent: "center",
  },

  scan: {
    marginLeft: 30,
    position: "absolute",
    bottom: 0,
    right: 20,
    marginBottom: 60,
    marginRight: 30,
    padding: 10,
    borderRadius: 10,
    backgroundColor: "#ff9234",
  },
});

export default ProductsScreen;

感谢您的评论。

祝一切顺利，

Answer 1

您可以使用？ （可选链接）以确认数据在映射前不会产生未定义的数据。

data?.map((data, index) => {return <>....</>}

Answer 2

您需要从data.map函数返回以呈现数组项

return isLoading ? (
    <ActivityIndicator />
  ) : (
   <>
    {data?.map((data, index) => {
      return <>
        key ={index}
        <Text> {data.products_name_fr} </Text>
        <Text> {data.brands} </Text>
        <Text> {data.image_url} </Text>
        <View style={styles.scan}>
          <MaterialCommunityIcons
            name="barcode-scan"
            size={40}
            color="black"
            onPress={() => {
              navigation.navigate("CameraScreen");
            }}
          />
        </View>
      </>;
    })}
    </>
  );

或退货的简写

return isLoading ? (
    <ActivityIndicator />
  ) : (
  <>
    data?.map((data, index) => (
      <>
        key ={index}
        <Text> {data.products_name_fr} </Text>
        <Text> {data.brands} </Text>
        <Text> {data.image_url} </Text>
        <View style={styles.scan}>
          <MaterialCommunityIcons
            name="barcode-scan"
            size={40}
            color="black"
            onPress={() => {
              navigation.navigate("CameraScreen");
            }}
          />
        </View>
      </>;
    ))
   </> 
  );

Answer 3

我像这样更改了代码，但是有相同的错误。此外，从以下部分开始的代码部分：const styles = Stylesheet.create似乎未激活

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Button, AsyncStorage } from "react-native";
import { useNavigation } from "@react-navigation/core";
import { TouchableOpacity } from "react-native-gesture-handler";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native-paper";
import axios from "axios";

function ProductsScreen() {
  const navigation = useNavigation();
  const [data, setData] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const data = await AsyncStorage.getItem("userData");

      setisLoading(false);
      setData(data);
    };
    fetchData();
  }, []);

  return isLoading ? (
    <ActivityIndicator />
  ) : (
    <>
      {data?.map((data, index) => {
        return (
          <>
            key ={index}
            <Text> {data.products_name_fr} </Text>
            <Text> {data.brands} </Text>
            <Text> {data.image_url} </Text>
            <View style={styles.scan}>
              <MaterialCommunityIcons
                name="barcode-scan"
                size={40}
                color="black"
                onPress={() => {
                  navigation.navigate("CameraScreen");
                }}
              />
            </View>
          </>
        );
      })}
    </>
  );

  const styles = StyleSheet.create({
    products: {
      alignItems: "center",
      justifyContent: "center",
    },

    scan: {
      marginLeft: 30,
      position: "absolute",
      bottom: 0,
      right: 20,
      marginBottom: 60,
      marginRight: 30,
      padding: 10,
      borderRadius: 10,
      backgroundColor: "#ff9234",
    },
  });
}
export default ProductsScreen;

Answer 4

我更改了一些代码，但又遇到另一种类型的错误：不变违规：文本字符串必须在组件中呈现。非常感谢您的评论和支持，可以解决此问题

return isLoading ? (
    <ActivityIndicator />
  ) : (
    <>
      data?.map((data, index) => (
      <>
        <Text> {data.products_name_fr} </Text>
        <Text> {data.brands} </Text>
        <Text> {data.image_url} </Text>
        <View style={styles.scan}>
          <MaterialCommunityIcons
            name="barcode-scan"
            size={40}
            color="black"
            onPress={() => {
              navigation.navigate("CameraScreen");
            }}
          />
        </View>
      </>
      ))
    </>
  );
}