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

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

Я думаю, что это относится к указанному ниже компоненту App, но не вижу, что я сделал не так.

Подсветка синтаксиса в VS Code указывает на строку ниже, где const не выделяется, как в других областях кода.

const Context = React.createContext()

class App extends React.Component {

            const Context = React.createContext()            

            class ConnectedApp extends React.Component {
                render() {
                    return (
                        <Context.Consumer>
                            {(store) => (
                                <App store={store}/>
                            )}
                        </Context.Consumer>
                    )
                }
            }

            class Provider extends React.Component {
                render() {
                    <Context.Provider value={this.props.store}>
                        { this.props.children }
                    </Context.Provider>
                }
            }


            componentDidMount () {
                const { store } = this.props
                store.dispatch(handleIitialData())
                store.subscribe( () => this.forceUpdate())
            }

            render() {
                const { store } = this.props
                const { todos, goals, loading } = store.getState()

                if(loading) { return <h3>Loading</h3> }

                return(
                    <div>
                        < Todos todos={todos} store={this.props.store} />
                        < Goals goals={goals} store={this.props.store} />
                    </div>
                )
            }
        }

Error

babel.min.js:27 Uncaught SyntaxError: Inline Babel script: Unexpected token (108:18)
  106 |         class App extends React.Component {
  107 | 
> 108 |             const Context = React.createContext()            
      |                   ^
  109 | 
  110 |             class ConnectedApp extends React.Component {
  111 |                 render() {
    at r.l.raise (babel.min.js:27)
    at r.c.unexpected (babel.min.js:27)
    at r.c.expect (babel.min.js:27)
    at r.m.parseMethod (babel.min.js:27)
    at r.parseClassMethod (babel.min.js:28)
    at r.m.parseClassBody (babel.min.js:27)
    at r.m.parseClass (babel.min.js:27)
    at r.m.parseStatement (babel.min.js:27)
    at r.parseStatement (babel.min.js:27)
    at r.m.parseBlockBody (babel.min.js:27)
1
3therk1ll 21 Июн 2018 в 16:57

1 ответ

Лучший ответ

Это связано с тем, что синтаксис, который вы пытаетесь использовать в этом классе, не входит в вашу конфигурацию babel и не поддерживается вашим движком (узлом / браузером) (и это просто предложение для предложение общедоступных полей класса).

Лучше добавить поддержку этого синтаксиса в свой babel ( stage-3 < / a>), зная, что существует риск того, что этот синтаксис не пройдет в качестве окончательной особенности языка.

Или объявите константу Context вне класса (или внутри конструктора класса, а затем получите к нему доступ с помощью контекста this ).

Пример (из официальной документации, адаптированный для вашего кода):

// the Context is created outside App
const Context = React.createContext();

// Also ConnectedApp and Provider are OUTSIDE App (The console doesnt complain now, but it will after you fix the one with const)

 class Provider extends React.Component {
            render() {
                <Context.Provider value={this.props.store}>
                    { this.props.children }
                </Context.Provider>
            }
        }

class App extends React.Component {
        componentDidMount () {
            const { store } = this.props
            store.dispatch(handleIitialData())
            store.subscribe( () => this.forceUpdate())
        }

        render() {
            const { store } = this.props
            const { todos, goals, loading } = store.getState()

            if(loading) { return <h3>Loading</h3> }

            return(
                <div>
                    < Todos todos={todos} store={this.props.store} />
                    < Goals goals={goals} store={this.props.store} />
                </div>
            )
        }
    }

// ConnectedApp goes after App since it uses App internally
class ConnectedApp extends React.Component {
      render() {
            return (
               <Context.Consumer>
                   {(store) => (
                       <App store={store}/>
                   )}
               </Context.Consumer>
           )
       }
 }  

В вашем коде есть и другие концептуальные ошибки React, но, поскольку вы следуете определенному курсу, я думаю, что это сделано намеренно.

2
SirPeople 21 Июн 2018 в 17:25