Question

错误 TypeError：undefined 不是一个函数为什么我的对象没有转换为数组？

2023-02-18

725

javascript reactjs react-native

错误 TypeError：未定义不是函数为什么我的对象没有转换为数组？这是我遇到的错误我正在尝试映射当前对象的所有项目，但我想将其转换为数组以映射所有项目我该怎么做？它没有转换成数组我尝试了互联网上的一些解决方案我该怎么做？

目前它给我 null 并且当我第一次 const propertyValues = Object.values(item); 它给了我错误 TypeError：未定义不是函数错误

const renderImages = ({ item, index }) => {
        console.log(item)
        if (!item || !Array.isArray(item)) {
            return null;
        }
        
        const propertyValues = Object.values(item);
        console.log(propertyValues);
        
        return (
            <View style={styles.images}>
                {item.map((url) => (
                    <Image key={url} style={styles.pic} source={{ uri: url }} />
                ))}
            </View>
        );
    };

如果我什么都不做只是记录该项目它会记录类似这样的内容：

LOG  {"picture": "https://firebasestorage.googleapis.com/v0/b/myprojectfirebase.appspot.com/o/file%3A%2Fdata%2Fuser%2F0%2Fhost.exp.exponent%2Fcache%2FExperienceData%2F%252540anonymous%25252FYounme-4dc528f7-0647-403c-9671-6a595b71bf0b%2FImagePicker%2Fba5eb500-c4e3-4199-9cef-5a8bfb3b1219.jpeg?alt=media&token=49041038-deef-40d9-9809-41210982ae36"}



       {
                    userdata ?
                        <FlashList
                            data={userdata.pictures}
                            renderItem={renderImages}
                            keyExtractor={(item, index) => index.toString()}
                            getItemCount={() => userdata.pictures.length}
                            getItem={(data, index) => data[index]}
                            initialNumToRender={5}
                            windowSize={5}
                            ListHeaderComponent={
                                   ...//
    
    }

}
    
    />

Answer 1

如果 item 是一个对象，此代码将始终返回 null ：

if (!item || !Array.isArray(item)) {
  return null;
}

此外，如果您想创建一个 URL 数组，您可以简单地使用 Object.keys 和 .map 来创建一个 item URL 数组。

const properties = Object.keys(item);
const values = properties.map((p) => item[p].url);

由于 item 只有一张 picture ，为什么不简化呢：

const renderImages = ({ item, index }) => {
  return (
    <View style={styles.images}>
      <Image key={item.picture} style={styles.pic} source={{ uri: item.picture }} />
    </View>
  );
};

Answer 2

考虑这样做：

const renderImages = ({ item, index }) => {
  return (
    <View style={styles.images}>
      <Image key={url.picture} style={styles.pic} source={{ uri: url.picture }} />
    </View>
  );
};