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

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

if (!criptomonedas || !Array.isArray(criptomonedas))
   return <ActivityIndicator>
return <Picker/>

Answer 2

您需要从data.map函数返回以渲染数组项

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开始的那部分代码似乎没有激活

aria-hidden

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

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

5 个答案: