React native [TypeError: undefined is not an object (evalating 'iter[Symbol.iterator]')] 错误

Question

所以我有一个图像选择器，当我按下它时，它会启动手机图像库，然后当我选择图像时它应该填充该图像选择器，但每次我选择图像时，都会出现此错误

[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”部分有关，但我不知道如何解决它们。提前致谢。

Answer 1

问题出在这里：

const [imageUris, setImageUris] = useState();

您正在尝试传播 imageUris，但它在第一次初始化时不是数组。

只需将useState(); 替换为useState([]);