Question

我目前正在尝试为单页应用程序学习Firebase和React，该应用程序可从Firebase托管的实时数据库中读取数据。

我正在他们自己的Google / Firebase教程中，他们在这里解释如何一起使用Firebase和React。（Tutorial）

我来自create-react-app的代码与视频中显示的代码不同，即使我将代码更改为视频中显示的代码也不起作用。

更改前的代码：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as firebase from 'firebase';

function App() {

  constructor(
    super(),
    this.state = {
      speed: 10
    }
  );

  return (
    <div className="App">
      <h1>{this.state.speed}</h1>
    </div>
  );
}

export default App;

修改后的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as firebase from 'firebase';

class App extend Component {
  constructor() {
    super();
    this.state = {
      speed: 10
    };
  }

  render() {
    return (
        <div className="App">
          <h1>{this.state.speed}</h1>
        </div>
    );
  }
}

export default App;

修改前的代码给了我这个编译错误：

./src/App.js
  Line 8:  Parsing error: Unexpected token, expected ";"

   6 | function App() {
   7 | 
>  8 |   constructor() {
     |                 ^
   9 |     super();
  10 |     this.state = {
  11 |       speed: 10

更改的代码给了我这个编译错误：

./src/App.js
  Line 6:  Parsing error: Unexpected token, expected "{"

  4 | import * as firebase from 'firebase';
  5 | 
> 6 | class App extend Component {
    |           ^
  7 |   constructor() {
  8 |     super();
  9 |     this.state = {

真的很感谢任何帮助，我是Firebase和React的新手。

Answer 1

您必须写extends而不是extend：

class App extends Component {
  constructor() {
    super();
    this.state = {
      speed: 10
    };
  }

  render() {
    return (
        <div className="App">
          <h1>{this.state.speed}</h1>
        </div>
    );
  }
}

export default App;

关于Firebase + React的教程出现问题

1 个答案: