处理 React useEffect 钩子中的响应状态 - 生命周期问题？

Question

我目前正在通过从useEffect钩子中的 API 获取来呈现一些数据。

我有一个searchValue变量，它保存用户在主页搜索字段上输入的值。 这将传递给该component 。

我在useEffect依赖项中设置了searchValue以便当它改变时它会再次运行效果。

当它安装时，它似乎跳过了!res.ok if 语句。 我已将res.ok记录到此 if 语句之外的控制台，并且输入到searchValue每个字符总是返回true 。 按下字符后，响应状态始终为 200，因此它永远不会运行!res.ok if 语句块。 我对生命周期或异步调用的理解一定有问题。

我收到错误： countriesData.map is not a function - 所以它试图在无效数据上呈现map ，但是这甚至不应该返回，因为我首先在Content函数中写入了if (error) 。 如果匹配，它应该返回错误信息，而不是，但这个被跳过， 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

Answer 1

我认为您一定对countriesData的形状有误解。 您将其初始化为一个空数组，因此.map将适用.map 。 然后你唯一改变它的地方是setCountriesData(data) - 所以这不能是一个数组。

Answer 2

如果您确定将数组设置为 countryData，那么您只需添加 Optional 链接语法即可修复。

更换countriesData.map与

countriesData?.map

可选链