未捕获的类型错误：无法读取 null 的属性'todos'

我是一个绝对的初学者，我正在做一个教程，我犯了一个我找不到的错误。我已经浏览了将其与讲师匹配的代码，但是我根本找不到错误。

嵌入式：29 Undurect typeError：无法读取null的属性'todos'。

当我检查页面时，它说问题是'）'在以下块中。最后括号。

<html>
    <head>
    <title>REACT IS FUN</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="react-15.1.0.js"></script>
      <script src="/react-dom-15.1.0.js"></script>
      <script src="cdnjs.cloudflare.com/ajax/libs/babel-   core/5.8.23/browser.min.js"></script>
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div id="app"></div>
        </div>
      </div>
    </div>

      <script type="text/babel">
    var App = React.createClass({
            GetInitialSate: function(){
              return{
                text: '',
                todos: [
                  {
                    id: 1,
                    name: 'Meeting at Work'
                  },
                  {
                    id: 2,
                    name: 'Eat Lunch with babe'
                  },
                  {
                    id: 3,
                    name: 'Tap that'
                  }
                ]
              }
            },
      render: function(){
        return(
          <div>
            <TodoForm />
            <TodoList todos={this.state.todos} />
          </div>
        )
      }
    });

  var TodoForm = React.createClass({
    render: function(){
      return(
        <div>
          TODOFORM
        </div>
      )
    }
  });
var TodoList = React.createClass({
  render: function(){
    return(
      <ul>
      {
        this.props.todos.map(todo => {
          return <li todo={todo} key={todo.id}>{todo.name}</li>
        })
      }
      </ul>
    )
  }
});
       ReactDOM.render(
           <App />,
          document.getElementById('app')
         );
       </script>
        </body>
    </html>

一个小错误可能是您错误的原因。您使用GetInitialState()初始化状态变量。它应该是getInitialState()

<html>
    <head>
    <title>REACT IS FUN</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="react-15.1.0.js"></script>
      <script src="/react-dom-15.1.0.js"></script>
      <script src="cdnjs.cloudflare.com/ajax/libs/babel-   core/5.8.23/browser.min.js"></script>
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div id="app"></div>
        </div>
      </div>
    </div>
  <script type="text/babel">
var App = React.createClass({
        getInitialState: function(){
          return{
            text: '',
            todos: [
              {
                id: 1,
                name: 'Meeting at Work'
              },
              {
                id: 2,
                name: 'Eat Lunch with babe'
              },
              {
                id: 3,
                name: 'Tap that'
              }
            ]
          }
        },
  render: function(){
    return(
      <div>
        <TodoForm />
        <TodoList todos={this.state.todos} />
      </div>
    )
  }
});


var TodoForm = React.createClass({
    render: function(){
      return(
        <div>
          TODOFORM
        </div>
      )
    }
  });
var TodoList = React.createClass({
  render: function(){
    return(
      <ul>
      {
        this.props.todos.map(todo => {
          return <li todo={todo} key={todo.id}>{todo.name}</li>
        })
      }
      </ul>
    )
  }
});
   ReactDOM.render(
       <App />,
      document.getElementById('app')
     );
   </script>
    </body>
</html>

JSFIDDLE：

它应该对您有用。

相关内容

最新更新

热门标签：

未捕获的类型错误： 无法读取 null 的属性'todos'

相关内容

最新更新

热门标签：

未捕获的类型错误：无法读取 null 的属性'todos'