“undefined is not an object”，需要检查 allNotes 数组是否为空。 如何？

Question

感觉这是一个愚蠢的问题，但如果 allNotes 不为空（它是一个数组），我只需要返回 allNotes 地图数据。 这似乎只是一个简单的 if/else 但真的无法弄清楚如何在这种情况下（内部视图）执行此操作。 现在，当数组中没有任何内容时，我会收到标题中的错误。 当它有数据时，一切都很好。

{isOpen &&
                <TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
                    <View style={{ alignItems: 'center' }}>
                        <Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
                    </View>
                    <View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />

                    <View>

                        {allNotes.map((item) => {

                            return (
                                <View style={{ flexDirection: 'row', margin: 5 }}>
                                    <View style={styles.perItemBar} />
                                    <Text style={styles.noteTextStyle}>{item}</Text>
                                </View>
                            )

                        })}

                        <View style={styles.bottomBar}>
                            <TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
                            <TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
                                <Text style={{ fontSize: 30 }}>+</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                </TouchableOpacity>
            }
        </View>
    )

}

我再次知道这是一件非常简单的事情，但我无法正确设置格式。 不知道这样做的正确方法是什么。 谢谢！

Answer 1

总是可以仔细检查 allNotes 是否是这样定义的，尽管将 allNotes 默认为空数组可能会更好，然后在此处确认它是您所期望的。

{isOpen &&
                <TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
                    <View style={{ alignItems: 'center' }}>
                        <Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
                    </View>
                    <View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />

                    <View>

                        {allNotes && allNotes.map(item => (
                                <View style={{ flexDirection: 'row', margin: 5 }}>
                                    <View style={styles.perItemBar} />
                                    <Text style={styles.noteTextStyle}>{item}</Text>
                                </View>
                            )
                        )}

                        <View style={styles.bottomBar}>
                            <TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
                            <TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
                                <Text style={{ fontSize: 30 }}>+</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                </TouchableOpacity>
            }
        </View>
    )
}