2016-06-15 5 views
-1

私は絶対初心者です。私はチュートリアルを行っています。私は見つけることができないエラーを作りました。私は教師にそれを一致させるコードを通過しましたが、私は単にエラーを見つけることができません。Uncaught 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> 
+0

s/GetInitialState/getInitialState/ –

答えて

0

小さなエラーが原因でエラーが発生する可能性があります。 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:

でなければなりません。

+0

@Emil私の答えが問題を解決しましたか? –

関連する問題