javascript - useEffect 仅运行一次，刷新后不会再次获取

Question

我有一个从站点获取数据并尝试获取其 key 的组件。
问题是它第一次工作正常，但是当我刷新页面/在 VSCode 中保存项目(并且项目自动刷新)时，它显示此错误消息:

TypeError: Cannot convert undefined or null to object
  14 |    )
  15 | 
  16 |    return (
> 17 |        <div className="rates">
     | ^  18 |            {Object.keys(rates.rates).map(
  19 |                rate => <Button variant="outlined">
  20 |                    {rate}

代码(具体组件):

import React, { useState, useEffect } from 'react'
import Button from '@mui/material/Button';


const RatesCard = () => {

    const [rates, setRates] = useState([]);
    useEffect(
        ()=>{
            fetch("https://api.vatcomply.com/rates")
            .then(ratesResponse => ratesResponse.json())
            .then(rates => setRates(rates));
        }
    ,[])

    return (
        <div className="rates">
            {Object.keys(rates.rates).map(
                rate => <Button variant="outlined">
                    {rate}
                </Button>
            )}
        </div>
        )
    }
    

export default RatesCard

我不知道为什么第一次可以，后来就不行了。我的猜测是 useEffect Hook 由于 [] 依赖关系只运行一次，然后当我们刷新它时它说“没有改变，所以我不会运行该函数"因此我们不获取任何东西，因此 rates 是 undefined...

我不知道为什么会这样，我只能猜测。感谢您的帮助!谢谢!

Answer 1

useEffect 在您的组件安装后运行这意味着 rates 只是一个空数组，没有名为 rates

的属性

Object.keys(rates.rates)

尝试使用

const [rates, setRates] = useState({rates:[]});

或者制作一个加载指示器，例如

const RatesCard = () => {

    const [rates, setRates] = useState([]);
    useEffect(
        ()=>{
            fetch("https://api.vatcomply.com/rates")
            .then(ratesResponse => ratesResponse.json())
            .then(rates => setRates(rates));
        }
    ,[])


    if(rates.length === 0) {
        return <h1> loading </hi>
     }
    return (
        <div className="rates">
            {Object.keys(rates.rates).map(
                rate => <Button variant="outlined">
                    {rate}
                </Button>
            )}
        </div>
        )