React Native Mapped Components — неожиданный токен

Я пытаюсь пройти через пример, найденный в книге 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))

Кажется, это происходит каждый раз, когда я пытаюсь сопоставить набор компонентов. Есть идеи, что/где я что-то упускаю?

react-native

22.01.2019 18:30

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

Ответы 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>
    )
}
}

Хорошая заметка, но, к сожалению, это не помогает решить проблему.

— 22.01.2019 18:39

Негатив ко второму изменению, а также.

— 22.01.2019 18:40

Можете ли вы реализовать это на Expo Snack? чтобы я мог видеть, что не так

— 22.01.2019 18:42

22.01.2019 18:36

К сожалению, это не имело ничего общего с самим кодом.

Раньше у меня была недопустимая точка с запятой после функции карты, например:

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

Хотя я сам обнаружил эту ошибку, по какой-то причине версия на симуляторе не обновлялась, что бы я ни делал. После полного удаления приложения из симулятора и его повторной сборки проблема была решена.

Мораль истории: попробуйте восстановить!

22.01.2019 19:05