Question

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

embedded：29 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>

Answer 1

小错误可能是导致错误的原因。您已使用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:

它应该适合你。

未捕获的TypeError：无法读取null的属性'todos'

1 个答案: