React native 反应本机映射组件-意外令牌

我试图通过在《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>
        )
    }
}

类库扩展了React.Component{
render（）{
const{books}=this.props
返回(
书
{
books.map（（书籍，索引）=>(
{book.name}
{book.author}
))
}
)
}
}

我遇到的问题是一个意外的标记：

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))

2019-01-22 10:26:24.022929-0700 0x16165默认0x0 22625 0 RNRedux:无法加载捆绑包(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false)错误：（SyntaxError:/Users/buddy/Documents/react native begin/RNRedux/node_modules/react native/src/Books.js:意外标记，应为“}”（28:26）
\^[0百万^[90百万^[3千9百万^[3千3百万^[3千9百万^[0百万]
\^[0百万美元
\^[0m\^[31m\^[1m>\^[2200万\^[39m\^[90m 28\^[39m]）^[330m；\^[39m\^[0m]
\^[百万美元][90百万美元][39百万美元][31百万美元][1百万美元][22百万美元][39百万美元][0百万美元
\^[0m\^[90m 29\^[39m}\^[0m]
\^[0万立方米][90万立方米][3千3百万立方米][3千3百万立方米][3千9百万立方米][0万立方米
\^[0m\^[90m 31\^[39m\^[330m\^[39m\^[0m（空））

---

这似乎在我试图映射一组组件的任何时候都会发生。知道我遗漏了什么/在哪里吗？

我看到你在使用

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.Component{
render（）{
const{books}=this.props
返回(
书
{
books.map（（书籍，索引）=>(
{book.name}
{book.author}
))
}
)
}
}

不幸的是，它与代码本身没有任何关系——有点像

以前，我在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>
));

books.map（（书籍，索引）=>(
{book.name}
{book.author}
));

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

---

故事的寓意：试着重建！

这是一个很好的提示，但不幸的是，这无助于解决问题。第二个变化也是负面的。你能在世博快餐上实施它吗？这样我就可以看出哪里出了问题