ReactNative[TypeError:undefinedisnotanobject(evaluating'iter[Symbol.iterator]')]錯誤

所以我有一個影像選擇器，當我按下時，它會啟動手機影像庫，然后當我選擇影像時，它應該填充該影像選擇器，但每次選擇影像時，我都會收到此錯誤

[TypeError: undefined is not an object (evaluating 'iter[Symbol.iterator]')]

這就是我的代碼的樣子 這是 App 檔案

import React, {useState} from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import Screen from './app/components/Screen'
import ImageInputList from './app/components/ImageInputList'

export default function App() {
const [imageUris, setImageUris] = useState();

const handleAdd = (uri) => {
  setImageUris([...imageUris, uri])
}

const handleRemove = uri => {
  setImageUris(imageUris.filter(imageUri => imageUri !== uri))
}

  return (
      <Screen>
        <ImageInputList imageUris={imageUris} onAddImage={handleAdd} onRemoveImage={handleRemove} />
      </Screen> 
  )
}

然后這是我的第二個組件“imageInputList”

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import ImageInput from './ImageInput'

export default function ImageInputList({imageUris = [], onRemoveImage, onAddImage}) {
    return (
        <View style={styles.container}>
            {imageUris.map((uri) => (
                <View key={uri} style={{marginRight: 10}}>
                    <ImageInput 
                        imageUri={uri} 
                        onChangeImage={() => onRemoveImage(uri)} 
                    />
                </View>
            ))}
             <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
        </View>
    )
}

最后，這是 imageInput 組件

import React, {useEffect} from 'react'
import { Image, StyleSheet, TouchableWithoutFeedback, Alert, View } from 'react-native'
import {MaterialCommunityIcons} from "@expo/vector-icons"
import * as ImagePicker from "expo-image-picker"


export default function ImageInput({imageUri, onChangeImage}) {
    useEffect(() => {
        requestPermission();
    }, [])
    
    const requestPermission = async () => {
        const {granted} = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if(!granted) alert("Allow this app to access your image library")
      }

      const handlePress = () => {
          if(!imageUri) selectImage();
          else Alert.alert("Delete", 
          "Are you sure you want to delete this image?", 
          [{text: "Yes",  onPress: onChangeImage(null)}, {text: "No"},])
      };

    const selectImage = async () => {
        try {
          const result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            quality: 0.5,
          });
          if(!result.cancelled) onChangeImage(result.uri);
        } 
        
        catch (error) {
          console.log("Something went wrong in your code", error)
        }
      }

    return (
        <TouchableWithoutFeedback onPress={handlePress}>
            <View style={styles.container} >
                {!imageUri && <MaterialCommunityIcons name="camera" size={40} color="grey" />}
                {imageUri && <Image source={{uri: imageUri}} style={styles.image} />}
            </View>              
        </TouchableWithoutFeedback>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#f1f1f1",
        borderRadius: 15,
        marginTop: 40,
        alignItems: 'center',
        justifyContent: 'center',
        overflow: "hidden",
        width: 100,
        height: 100,
    },
    image: {
        height: "100%",
        width: "100%",
    }
})

我知道這個問題與“handleAdd”或“onChangeImage”部分有關，但我不知道如何修復它們。提前致謝。

uj5u.com熱心網友回復：

問題在這里：

const [imageUris, setImageUris] = useState();

您正在嘗試傳播 imageUris 但它在首次初始化時不是陣列。

簡單地替換useState();為useState([]);

標籤：反应 反应原生 循环 react-native-android react-native-image-picker

上一篇：創建直方圖以映射字符頻率

下一篇：撰寫一個程式，計算并顯示用戶輸入的正整數n的階乘