ajaxリクエストを介して状態を更新しますが、状態はまだ定義されていません

Question

ajaxリクエストによってサーバーに状態を更新しています。サーバーからデータを受信して​​いますが、何らかの理由で状態が更新されず、配列を反復しようとすると定義されていません。

class TodoList extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: undefined 
    } 
    } 

    componentWillMount() { 
    request 
     .get('http://localhost:8080/api/todo') 
     .end(function(err, res) { 
     this.setState({data: res}); 
     }.bind(this)); 
    } 

    render() { 
    return (
     <div> 
     <h1>Todo Items</h1> 
     <ul> 
      {this.states.data.map((item) => { 
      return <li>item.data</li> 
      })} 
     </ul> 
     </div> 
    ); 
    } 
} 

コンソールログ

Uncaught TypeError: Cannot read property 'data' of undefined 
Uncaught TypeError: Cannot read property '_currentElement' of null 

Answer 1

あなたはthis.state.data

class TodoList extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     data: [] 
 
    } 
 
    } 
 

 
    componentWillMount() { 
 
    /*request 
 
     .get('http://localhost:8080/api/todo') 
 
     .end(function(err, res) { 
 
     this.setState({data: res}); 
 
     }.bind(this));*/ 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <h1>Todo Items</h1> 
 
     <ul> 
 
      {this.state.data.map((item) => { 
 
      return <li>item.data</li> 
 
      })} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <TodoList />, 
 
    document.getElementById('app') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app" />

方法と、デフォルト値でのレンダリングに this.stateで構文エラーを作りました

---

Answer 2

まず第一に、あなたはタイプミス、変更があります：あなたのデータがフェッチされる前に、また

{this.state.data.map((item) => { 
    return <li>item.data</li> 
})} 

：へ

{this.states.data.map((item) => { 
    return <li>item.data</li> 
})} 

を、state.dataはundefindedであり、方法はありません.map()です。空の配列に
変更を：

constructor(props) { 
    super(props); 
    this.state = { 
    data: undefined 
    } 
} 

に：

constructor(props) { 
    super(props); 
    this.state = { 
     data: [] 
    } 
}