Question

我有一个问题，我无法弄清楚如何解决它。我检查了React文档，我的语法与Facebook官方文档中的语法类似。

我刚刚开始学习React库，学会了如何使用道具但是状态我有问题。此代码抛出一个错误，表示逗号字符不属于那里，而在文档中存在逗号。如果我删除逗号，则会显示todos is undefined：

class App extends Component {
  // State
  getInitialState() {
      return (
        todos: ["Wake up early", "Do some body exercise", "Continue learning React"]
      )
  }, <-- This is making the problem and it can't compile 
  // Props
  render () {
    return (
      <div id ="todo-list">
       <h1>Helo, user</h1>
       <p>Things to do:</p>
       <ul>
        <li>{this.state.todos[0]}</li>
        <li>{this.state.todos[1]}</li>
        <li>{this.state.todos[2]}</li>
       </ul>
      </div>
    );
  }
};

我正在学习本教程YouTube link，到目前为止他的教程之后，但我遇到了这个错误，我不知道该怎么做。

Answer 1

您正在尝试使用ES5语法在ES2015课程中创建您的组件，但这样做并没有成功。使用ES2015类定义组件时存在一些关键差异。

在ES2015课程中，方法之间没有逗号，你可能会对对象文字感到困惑。

此外，在ES2015课程中，您必须使用constructor设置初始状态，而不是getInitialState。那是ES5的createClass。在创建组件的新实例时，将调用构造函数，并且＆＃34;构造组件＆＃34;，就像componentWillMount方法一样。它是一个＆＃34;保留＆＃34; ES2015课程中的方法。以下是constructor：

的使用方法

constructor() {
    super(); //super before anything else to call superclass constructor
    this.state = {
        todos: ["Wake up early", "Do some body exercise", "Continue learning React"]
    };
}

这将直接设置this.state对象（仅在构造函数中执行此操作！）todos未定义的原因是因为与ES2015的React不使用getInitialState就像在ES5中一样。因此，您从未真正设置状态，并且todos未定义。

注意：不要在React组件中使用ID。 React组件意味着可重用，如果您不能拥有两个具有相同ID的元素。

为什么我的React组件中出现了意外的令牌？

1 个答案: