Java 反应：未处理的拒绝（TypeError）：this.props.flights.forEach不是函数

我试图学习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;

---

如何修复此错误？谢谢。

您是否检查了从服务器收到的响应？我相信这不是导致这个错误的数组。发布从服务器收到的响应。

修复了我的错误，现在一切正常。在我的Spring控制器中，我添加了@CrossOrigin（origins=“”）作为注释，现在一切正常。

看起来您的API没有返回数组。

console.log（'Request successed with JSON response'，data）的输出是什么？？除了问题之外，您在
FlightApp
状态中设置了绑定函数，这是不正确的。绑定函数应该在外部。有什么必要让它们处于状态？
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;

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

}