Question

我正在尝试阅读《 React Native in Action》一书中的示例，发现我一生都无法发挥这一特定功能。

class Books extends React.Component<{}> {
    render() {
        const { books } = this.props

        return (
            <View style={styles.container}>
                <Text style={styles.title}>Books</Text>
                <ScrollView
                    keyboardShouldPersistTaps='always'
                    style={styles.booksContainer}
                >
                    {
                        books.map((book, index) => (
                            <View style={styles.book} key={index}>
                                <Text style={styles.name}>{book.name}</Text>
                                <Text style={styles.author}>{book.author}</Text>
                            </View>
                        ))
                    }
                </ScrollView>
            </View>
        )
    }
}

我遇到的问题是意外令牌：

2019-01-22 10:26:24.022929-0700 0x16165    Default     0x0                  22625  0    RNRedux: Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(SyntaxError: /Users/buddy/Documents/react-native-begin/RNRedux/node_modules/react-native/src/Books.js: Unexpected token, expected "}" (28:26)

\^[[0m \^[[90m 26 | \^[[39m                            \^[[33m<\^[[39m\^[[33m/\^[[39m\^[[33mView\^[[39m\^[[33m>\^[[39m\^[[0m
\^[[0m \^[[90m 27 | \^[[39m\^[[0m
\^[[0m\^[[31m\^[[1m>\^[[22m\^[[39m\^[[90m 28 | \^[[39m                        ))\^[[33m;\^[[39m\^[[0m
\^[[0m \^[[90m    | \^[[39m                          \^[[31m\^[[1m^\^[[22m\^[[39m\^[[0m
\^[[0m \^[[90m 29 | \^[[39m                    }\^[[0m
\^[[0m \^[[90m 30 | \^[[39m                \^[[33m<\^[[39m\^[[33m/\^[[39m\^[[33mScrollView\^[[39m\^[[33m>\^[[39m\^[[0m
\^[[0m \^[[90m 31 | \^[[39m            \^[[33m<\^[[39m\^[[33m/\^[[39m\^[[33mView\^[[39m\^[[33m>\^[[39m\^[[0m (null))

这似乎在我尝试在一组组件中进行映射时都会发生。知道我缺少什么/什么地方吗？

Answer 1

不幸的是，它与代码本身无关-

以前，在这样的map函数之后，我有一个无效的分号：

books.map((book, index) => (
    <View style={styles.book} key={index}>
        <Text style={styles.name}>{book.name}</Text>
        <Text style={styles.author}>{book.author}</Text>
    </View>
));

尽管我自己发现了这个错误，但无论出于何种原因，无论我做什么，模拟器上的版本都不会刷新。将应用程序从模拟器中完全删除并重建后，问题已解决。

故事的道德：尝试重建！

Answer 2

我看到您正在使用ScrollView，并且在ScrollView内部，您始终必须使用一个孩子。

您可以尝试类似的方法。并尝试将React.Component<{}>更改为React.Component，

class Books extends React.Component {
render() {
    const { books } = this.props

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Books</Text>
            <ScrollView
                keyboardShouldPersistTaps='always'
                style={styles.booksContainer}
            > 
             <View>
                {
                    books.map((book, index) => (
                        <View style={styles.book} key={index}>
                            <Text style={styles.name}>{book.name} 
                          </Text>
                            <Text style={styles.author}>{book.author} 
                        </Text>
                        </View>
                    ))
                }
               </View>
            </ScrollView>
        </View>
    )
}
}

React Native Mapped Components-意外令牌

2 个答案: