我目前正在通過從useEffect鉤子內的 API 獲取來呈現一些資料。
我有一個searchValue變數，用于保存用戶在主頁搜索欄位中輸入的值。這就是傳給 this component。
我已經設定searchValue了useEffect依賴項，這樣當它發生變化時，它會再次運行效果。
當它掛載時，它似乎跳過了!res.okif 陳述句。我已經在res.ok這個 if 陳述句之外將 記錄到控制臺，并且輸入到searchValue它的每個字符總是回傳true。按下字符后，回應狀態始終為 200，因此它永遠不會運行!res.okif 陳述句塊。我對生命周期或異步呼叫的理解一定有問題。
我收到錯誤：countriesData.map is not a function- 所以它試圖呈現map無效資料但是這甚至不應該回傳，因為我if (error)首先在Content函式中寫入。如果匹配，則應回傳錯誤訊息，但會跳過此操作并countriesData使用無效資料更新。我的代碼在下面，請幫忙！我覺得我錯過了一些簡單的東西并且誤解了 React 的一些基礎知識！
import { useEffect, useState } from 'react'
import CountryCard from '../CountryCard'
import { countries } from './CountriesList.module.css'
const CountriesList = ({ searchValue }) => {
const [error, setError] = useState(false)
const [loading, setLoading] = useState(true)
const [countriesData, setCountriesData] = useState([])
useEffect(() => {
const getCountries = async () => {
let res = await fetch('https://restcountries.com/v2/all')
if (searchValue !== '') {
res = await fetch(
`https://restcountries.com/v2/name/${searchValue}`
)
}
if (!res.ok) {
console.log(res)
return setError(true)
}
const data = await res.json()
setCountriesData(data)
setLoading(false)
}
getCountries()
// return () => setLoading(true)
}, [searchValue])
const Content = () => {
if (error) {
return <div>Error: please check the country you have typed</div>
}
if (loading) {
return <div>Loading...</div>
}
return (
<section className={`${countries} columns is-multiline`}>
{countriesData.map((country) => (
<CountryCard {...country} key={country.name} />
))}
</section>
)
}
return <Content />
}
export default CountriesList
uj5u.com熱心網友回復：
我想你一定搞錯了countriesData. 您將其初始化為一個空陣列，因此.map將對其進行處理。那么你唯一改變它的地方是setCountriesData(data)- 所以這不能是一個陣列。
uj5u.com熱心網友回復：
如果您確定將陣列設定為 countryData，那么您只需添加 Optional 鏈接語法即可修復。
替換 countriesData.map為
countriesData?.map
可選鏈
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/351793.html
標籤：javascript 反应 异步等待 拿来 反应生命周期
上一篇：React-添加換行符；