变量未定义（TypeError：无法读取null的属性'todos'）ReactJS

Question

这是我下面的所有代码。当我运行它时，我收到此错误（TypeError：无法读取属性'todos'为null）在此行找不到todos var todos=this.state.todos;

我的App.js文件

import React, { Component } from 'react';
class App extends Component {
    getInitialState (){
        return{
            todos:['washup',"hi","hello","up"]
        }
    }

render() {
      var todos=this.state.todos;

在这里添加代码

 todos=todos.map(function(item,index){
              return(
                <li>item</li>
              );
              }

      );

到这里

    return (
      <div id="App">
            <ul>{todos}</ul>
          )
   } )

      </div>
    );
  }
}


export default App;

这是我的index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from `'./registerServiceWorker';`

ReactDOM.render(<div>
                     <App>Here is my Buttonas</App>
                </div>, document.getElementById('root'));
registerServiceWorker();

编辑新错误

TypeError：无法读取未定义的属性“map”

在这一行todos = todos.map（function（item，index）{

现在的错误是什么？

Answer 1

getInitialState()仅与createReactClass()一起使用。使用ES6类时，只需将state设置为属性：

请参阅反应文档中的Setting the Initial State：

在ES6类中，您可以通过在this.state中分配constructor来定义初始状态：

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            todos: ['washup',"hi","hello","up"],
        }
    }

    // ...
}

要不就

class App extends Component {
    state = {
        todos: ['washup',"hi","hello","up"],
    }

    // ...
}

使用createReactClass()，您必须提供一个单独的getInitialState方法，它返回初始状态：

var App = createReactClass({
    getInitialState: function() {
        return {
            todos: ['washup',"hi","hello","up"],
        };
    },

    // ...
});

Answer 2

你是在较新版本的reactjs中初始化旧的状态。我已经很欣赏trixn的答案了。但是这里也是一个没有删除当前代码的解决方案：

class App extends Component {
    state = getInitialState (){
        return{
            todos:['washup',"hi","hello","up"]
        }
    }

请注意，我已将状态分配给getInitialState并且将正常工作，因为这会返回与此类似的对象{todos:['washup',"hi","hello","up"]}：

state = {todos:['washup',"hi","hello","up"]}

---

接下来，当您第一次呈现组件时，您的待办事项可能会如您所述的那样未定义。要解决此问题，您可以添加条件：

todos && todos.length && todos.map(...)

现在，map函数只有在todos未定义并且长度为ie时才会运行。它至少有一个值。

Answer 3

这是因为你没有在你的状态中定义待办事项，为了实现解决方案，在你的类中创建一个构造函数并在你的状态中设置一个todos变量，你可以在构造函数中设置为null或null并稍后填充它，然后你可以在你的渲染部分使用它，如果你需要进一步的信息评论，并在官方网站上阅读反应生命周期

Answer 4

使用createClass，您可以使用getInitialState：

const App = React.createClass({
      getInitialState() {
        return { /* initial state */ };
      },
    });

但是使用ES6课程你会喜欢这样：

class App extends React.Component {
 constructor(props) {
    super(props);
    this.state = {todos:['washup',"hi","hello","up"]};
  }
}

编辑：通过地图获取项目：

  class App extends Component {
    state={
      todos: ['washup', "hi", "hello", "up"]
    }

render() {
      var todos= this.state.todos.map((item)=>{
        return <li>{item}</li>
      })

    return (
      <div id="App">
            <ul>{todos}</ul>

           </div>
    )
  }
}

Answer 5

试试这个。你应该在App.Js状态中定义你的待办事项

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
    constructor(props) {
    super(props);
    this.state ={
       todos:['washup',"hi","hello","up"]
    }
  }

render() {


    return (
      <div id="App">
            <ul>{this.state.todos}</ul>
      </div>
    );
  }
}

export default App;