在 React useEffect 挂钩中处理响应状态 - 生命周期问题?
Handling response status in React useEffect hook - lifecycle issue?
我目前正在通过 useEffect
挂钩中的 API 获取一些数据。
我有一个 searchValue
变量,它保存用户在主页搜索字段中输入的值。这传给了这个component
.
我在 useEffect
依赖项中设置了 searchValue
这样当它改变时它会再次 运行 效果。
安装时,它似乎跳过了 !res.ok
if 语句。我已经将 res.ok
记录到此 if 语句之外的控制台,并且每个字符输入 searchValue
它总是返回 true
。按下字符后响应状态始终为 200,因此它永远不会 运行s !res.ok
if 语句块。我对生命周期或异步调用的理解一定有问题。
我收到错误:countriesData.map is not a function
- 所以它试图在无效数据上呈现 map
但是这甚至不应该 return 因为我有 if (error)
首先写在 Content
函数中。如果这是匹配的,它应该 return 错误消息,但是这被跳过并且 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
我想你一定是搞错了countriesData
的形状。您将其初始化为一个空数组,因此 .map
将对其进行处理。然后你改变它的唯一地方是 setCountriesData(data)
- 所以这不能是一个数组。
如果您确定要将数组设置为 countriesData,则只需添加可选链接语法即可修复。
用
替换countriesData.map
countriesData?.map
我目前正在通过 useEffect
挂钩中的 API 获取一些数据。
我有一个 searchValue
变量,它保存用户在主页搜索字段中输入的值。这传给了这个component
.
我在 useEffect
依赖项中设置了 searchValue
这样当它改变时它会再次 运行 效果。
安装时,它似乎跳过了 !res.ok
if 语句。我已经将 res.ok
记录到此 if 语句之外的控制台,并且每个字符输入 searchValue
它总是返回 true
。按下字符后响应状态始终为 200,因此它永远不会 运行s !res.ok
if 语句块。我对生命周期或异步调用的理解一定有问题。
我收到错误:countriesData.map is not a function
- 所以它试图在无效数据上呈现 map
但是这甚至不应该 return 因为我有 if (error)
首先写在 Content
函数中。如果这是匹配的,它应该 return 错误消息,但是这被跳过并且 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
我想你一定是搞错了countriesData
的形状。您将其初始化为一个空数组,因此 .map
将对其进行处理。然后你改变它的唯一地方是 setCountriesData(data)
- 所以这不能是一个数组。
如果您确定要将数组设置为 countriesData,则只需添加可选链接语法即可修复。
用
替换countriesData.map
countriesData?.map