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

Question

我目前正在通过 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

Answer 1

我想你一定是搞错了countriesData的形状。您将其初始化为一个空数组，因此 .map 将对其进行处理。然后你改变它的唯一地方是 setCountriesData(data) - 所以这不能是一个数组。

Answer 2

如果您确定要将数组设置为 countriesData，则只需添加可选链接语法即可修复。

用

替换countriesData.map

countriesData?.map

Optional chaining

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

Handling response status in React useEffect hook - lifecycle issue?

javascript

reactjs

async-await

fetch

react-lifecycle