Question

我正在尝试在屏幕上打印我的字母数组，但目前没有任何显示。

我还尝试将touchableOpacity视图包装为另一个视图，或将其更改为“仅视图”或“仅文本”，但是我没有成功。

const letters = ['a','b','c','d','e','f','g','h','i','j','k','l','m'];

const OptionalLetters = props => {

    const mixedLetters = () => {

        letters.map(()=> (letter, key) => {
            return (
                <TouchableOpacity key={Math.random()} onPress={()=> console.log('letter pressed')}>
                    <Text>{letter}</Text>
                </TouchableOpacity>
            )
        })
    }

    return (
        <View style={styles.screen}>
            {mixedLetters()}
        </View>
    )
}

Answer 1

您没有返回地图。这样做：

const letters = ['a','b','c','d','e','f','g','h','i','j','k','l','m'];

const OptionalLetters = props => {

    const mixedLetters = () => {

        return letters.map((letter, key) => {
            return (
                <TouchableOpacity key={Math.random()} onPress={()=> console.log('letter pressed')}>
                    <Text>{letter}</Text>
                </TouchableOpacity>
            )
        })
    }

    return (
        <View style={styles.screen}>
            {mixedLetters()}
        </View>
    )
}

Answer 2

您的代码中还有一个() =>。

更改

letters.map(()=> (letter, key) => {

收件人

letters.map((letter, key) => {

您还可以使用key（包含索引，因此它始终是唯一的）作为键

Answer 3

好像您在groupby上忘记了退货声明

在反应本机功能组件内部映射数组

3 个答案: