REACT：未處理的抑制（類型錯誤）：this.props.flights.forEach不是一個函數

我想學反應，我從我的節目標題偶然發現了錯誤。這裏是我的代碼：REACT：未處理的抑制（類型錯誤）：this.props.flights.forEach不是一個函數

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類的第一行出現錯誤，當我試圖填充它時。在我啓動應用程序後，立即看到表格填滿了應該如何，然後我收到錯誤。

這裏是我聲明我的「航班」數組。

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（）」方法是這樣的，並呼籲從Java REST春天服務器的方法返回一個列表

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; 
     }); 

}

我怎麼能解決這個問題？謝謝。

來源

2017-06-03 Artyomska

看起來你的API沒有返回數組。 'console.log（'請求成功使用JSON響應'，data）的輸出是什麼？ – Panther

除了這個問題之外，你已經在'FlightApp'狀態中設置了不正確的綁定函數。綁定函數應該在外部。有什麼需要讓他們進入狀態？ – Panther

修復了我的錯誤，現在一切正常。在我的Spring Controller中，我添加了一個註釋@CrossOrigin（origins =「http://localhost:3000」），現在一切正常。

來源

2017-06-04 08:46:28 Artyomska

您是否檢查過從服務器收到的回覆？我相信這不是導致這個錯誤的數組。發佈從服務器收到的響應。

來源

2017-06-03 19:35:54

REACT：未處理的抑制（類型錯誤）：this.props.flights.forEach不是一個函數

回答

相關問題