我正在開發 MERN Stack 專案。問題是當我進行第一個 API 呼叫時，第一個回應是未定義的，并且地圖函式給出了一個錯誤“地圖不是一個函式，它是有道理的。” 問題是我嘗試了幾種方法來防止這種情況發生，但它不起作用
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import axios, { Axios } from "axios"
import { useState, useEffect } from "react";
import '../index.css'
function SearchResults() {
const [searchValues, setSearchValues] = useState({})
useEffect(() => {
receivedata();
}, [searchValues])
const receivedata = async () => {
await axios.get('http://localhost:3001/getresults').then((response) => {
setSearchValues(response.data)
console.log(searchValues);
console.log("holaaaa")
console.log(searchValues.length)
}).catch(err => {
console.log(err)
console.log("i am here")
})
}
return (
<SearchDisplay></SearchDisplay>
);
function SearchDisplay() {
return (
<div>
{ searchValues.length !== 0 || typeof searchValues != undefined ? searchValues.map(flight => {
return <div className="flights">
<ul >
<li>Flight Number : {flight.FlightNumber} </li>
<li>Arrival Time : {flight.ArrivalTime} </li>
<li> Departue Date : {flight.DepartureDate} </li>
<li> Arrival Terminal : {flight.ArrivalTerminal} </li>
<li> Departure Terminal : {flight.DepartureTerminal} </li>
<li> Economy Seats : {flight.EconomySeats}</li>
<li> Business Class Seats : {flight.BusinessClassSeats}</li>
<li>Airport : {flight.Airport}</li>
<li>Arrival Terminal : {flight.ArrivalTerminal}</li>
</ul>
</div>
}) : <h1>No Results Found</h1>
}
</div>
)
}
}
export default SearchResults;
這是組件的代碼
uj5u.com熱心網友回復：
改變
const [searchValues, setSearchValues] = useState({})
到
const [searchValues, setSearchValues] = useState([])
您沒有將狀態設定為加載時的陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/367184.html
標籤：javascript 节点.js 反应 公理 默恩