TypeError: undefined is not a function ('...data.map...'附近)

Question

感谢您的帮助，我更新了我的代码。 当我使用 Expo 启动应用程序时，打开工作正常，但我丢失了未出现在屏幕上的扫描图标。 该图标以前出现过。 这个想法是扫描一些条形码以显示来自产品的相关数据。

这是我的新代码：

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  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";

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

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

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

  console.log(data);
  return isLoading ? (
    <ActivityIndicator />
  ) : (
    <>
      {data ? (
        <FlatList
          data={dataArray}
          keyExtractor={(item) => item.name}
          renderItem={({ item }) => (
            <>
              <Text>{item.brand}</Text>

              <View style={styles.scan}>
                <MaterialCommunityIcons
                  name="barcode-scan"
                  size={40}
                  color="black"
                  onPress={() => {
                    navigation.navigate("CameraScreen");
                  }}
                />
              </View>
            </>
          )}
        />
      ) : null}
    </>
  );
}
export default ProductsScreen;

我会很感激你的意见。

Answer 1

你能用吗？ （可选链接）在映射之前确认数据不会产生未定义。

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

Answer 2

您需要从data.map function 返回来渲染数组项

 return isLoading? ( <ActivityIndicator /> ): ( <> {data?.map((data, index) => { return <View 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> </View>; })} </> );

或返回的简写

 return isLoading? ( <ActivityIndicator /> ): ( <> data?.map((data, index) => ( <View 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> </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>
      </>
      ))
    </>
  );
}

Answer 5

在 useEffect 中，将数据设置为数组。 例子

const = [data, setData] = useState([]); // do this in your state

setData([data]); //do this in your useEffet hook