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类的第一行收到错误。在我启动应用程序之后，我立即看到表格填充了应该是什么，然后我收到了错误。

我在这里宣布我的航班＆＃34;阵列。

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;

＆＃34; GetFlights（）＆＃34;方法看起来像这样，它从Java REST Spring Server调用一个返回List

的方法

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

}

我该如何解决此错误？谢谢。

Answer 1

您是否检查过从服务器收到的回复？我相信它不是导致此错误的数组。发布从服务器收到的响应。

Answer 2

修正了我的错误，现在一切正常。在我的Spring Controller中，我添加了注释 @CrossOrigin（originins =“http://localhost:3000”），现在一切正常。

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

2 个答案: