REACT：処理されない拒否（TypeError）：this.props.flights.forEachは関数ではありません

Question

私はReactを勉強しようとしています。私は自分のプログラムのタイトルからエラーを見つけました。私のコードは次のとおりです：

class FlightRow extends React.Component{ 

handleClicke=(event)=>{ 
    console.log('delete button pentru '+this.props.flight.flightId); 
    this.props.deleteFunc(this.props.flight.flightId); 
} 

render() { 
    return (
     <tr> 
      <td>{this.props.flight.flightId}</td> 
      <td>{this.props.flight.destination}</td> 
      <td>{this.props.flight.airport}</td> 
      <td>{this.props.flight.freeseats}</td> 
      <td>{this.props.flight.datehour}</td> 
      <td><button onClick={this.handleClicke}>Delete</button></td> 
     </tr> 
    ); 
} 
} 

class FlightTable extends React.Component { 
render() { 
    var rows = []; 
    var functieStergere=this.props.deleteFunc; 
    this.props.flights.forEach(function(flight) { 

     rows.push(<FlightRow flight={flight} key={flight.flightId} deleteFunc={functieStergere} />); 
    }); 
    return (<div className="FlightTable"> 

     <table className="center"> 
      <thead> 
      <tr> 
       <th>FlightId</th> 
       <th>Destination</th> 
       <th>Airport</th> 
       <th>Freeseats</th> 
       <th>Datehour</th> 
       <th></th> 
      </tr> 
      </thead> 
      <tbody>{rows}</tbody> 
     </table> 

     </div> 
    ); 
} 
} 

export default FlightTable; 

FlightTableクラスの最初の行にエラーが表示されます。私がアプリケーションを起動した直後に、テーブルがちょうどどれくらいの状態になっているかを1秒間確認すると、エラーが表示されます。

ここで私の「フライト」配列を宣言します。

class FlightApp extends React.Component{ 
constructor(props){ 
    super(props); 
    this.state={flights:[{"flightId":12,"destination":"CCCCC","airport":"AAAAA","freeseats":100,"datehour":"2017-02-02"},{"flightId":13,"destination":"CCCCC","airport":"AAAAA","freeseats":100,"datehour":"2017-02-02"}], 
     deleteFunc:this.deleteFunc.bind(this), 
     addFunc:this.addFunc.bind(this), 
    } 
    console.log('FlightApp constructor') 
} 

addFunc(flight){ 
    console.log('inside add Func '+flight); 
    AddFlight(flight) 
     .then(res=> GetFlights()) 
     .then(flights=>this.setState({flights})) 
     .catch(erorr=>console.log('eroare add ',erorr)); 
} 


deleteFunc(flight){ 
    console.log('inside deleteFunc '+flight); 
    DeleteFlight(flight) 
     .then(res=> GetFlights()) 
     .then(flights=>this.setState({flights})) 
     .catch(error=>console.log('eroare delete', error)); 
} 


componentDidMount(){ 
    console.log('inside componentDidMount') 
    GetFlights().then(flights=>this.setState({flights})); 
} 

render(){ 
    return(
     <div className="FlightApp"> 
      <h1>Flight Management</h1> 
      <FlightForm addFunc={this.state.addFunc}/> 
      <br/> 
      <br/> 
      <FlightTable flights={this.state.flights} deleteFunc={this.state.deleteFunc}/> 
     </div> 
    ); 
} 
} 

export default FlightApp; 

「GetFlights（）」メソッドは次のようになり、そしてそれは私がこのエラーを修正する可能性がどのように一覧

export function GetFlights(){ 
var headers = new Headers(); 
headers.append('Accept', 'application/json'); 
var myInit = { method: 'GET', 
    headers: headers, 
    mode: 'cors'}; 
var request = new Request(CHAT_USERS_BASE_URL, myInit); 
console.log('Inainte de fetch pentru '+CHAT_USERS_BASE_URL) 
return fetch(request) 
    .then(status) 
    .then(json) 
    .then(data=> { 
     console.log('Request succeeded with JSON response', data); 
     return data; 
    }).catch(error=>{ 
      console.log('Request failed', error); 
      return error; 
     }); 

} 

を返すJavaのREST春Serverからメソッドを呼び出しますか？ありがとうございました。

Answer 1

このエラーは修正されましたが、すべて正常に機能しました。私のSpring Controllerでは、@CrossOrigin（origins = "http://localhost:3000"） のように注釈を追加しました。

Answer 2

サーバーから受け取った応答を確認しましたか？私はそれがこのエラーにつながる配列ではないと信じています。サーバーから受信した応答を送信します。