map 數組內部反應原生功能組件

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

您不會退回 map。 做這個：

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

看起來您在這里忘記了退貨聲明letters.map