React/NextJS 状态问题

Question

我在 NextJS/React 中有一个简单的脚本，我正在努力保存状态并在变量中重用数据。

import React from 'react';
import Head from 'next/head'
import Image from 'next/image'
import axios from 'axios';
import styles from '../styles/Home.module.css'

export default function Home() {

const [ETHdata, setETHData] = React.useState({ });

const [CryptoDATA, setCryptoDATA] = React.useState({ });

一切都很好:)

现在我正在从 API:

中获取数据

  const fetchETH = async () => {
    const res = await axios.get('https://api.coingecko.com/api/v3/simple/price?ids=Ethereum&vs_currencies=CHF&include_24hr_change=true'); 
    
    if (res.data && res.data.ethereum) {
      setETHData(res.data.ethereum);
    }

  }

但是由于为 10 种加密货币重写相同的东西可能很累，所以我在这里一次获取它们：

const fetchCryptoDATA= async () => {
  const res = await axios.get('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Ccrypto-com-chain%2Csolana%2Cavalanche-2%2Cblockstack%2Cflow%2Clitecoin%2Calgorand%2Ccardano&vs_currencies=CHF&include_24hr_change=true'); 



if (res.data ) {
    setCryptoDATA(res.data);
}
console.log (CryptoDATA)

}

但是当我显示它们时：

 React.useEffect(() => {
    fetchETH();
    fetchCryptoDATA();
  }, []);
  return (
...

这个很好用

<p>Ethereum {ETHdata['chf']}   {parseFloat(ETHdata['chf_24h_change']).toFixed(2)}</p>

但是

<p>ETHEREUM {CryptoDATA['ethereum']['chf']}   {parseFloat(CryptoDATA['ethereum']['chf_24h_change']).toFixed(2)}</p>

我第一次加载它时会工作，但随后 return

“无法读取未定义的属性 'chf'”

我确定这是微不足道的事情，非常感谢您的帮助！

Answer 1

CryptoDATA['ethereum'] 可能是 undefined。因为CryptoDATA的初始状态是一个空对象：

const [CryptoDATA, setCryptoDATA] = React.useState({ });

一种选择是将该初始状态设置为您期望的结构：

const [CryptoDATA, setCryptoDATA] = React.useState({ ethereum: { } });

另一种选择是在引用 potentially-undefined 对象的属性时使用 optional chaining：

CryptoDATA.ethereum?.chf

或者您可以检查属性是否明确存在：

CryptoDATA['ethereum'] ? CryptoDATA['ethereum']['chf'] : null

您甚至可以完全采用不同的方法并在 AJAX 操作期间跟踪布尔“加载”状态，并且在数据加载时根本不呈现这部分标记，而是将其替换为某种微调器或加载指示器。

无论您采用何种方式，底线都是一样的。您不能在 undefined 对象上引用属性。由于 AJAX 操作在第一次渲染后 完成，最初您要查找的对象当前是 undefined.

Answer 2

替换您的代码中的这一行。

ETHEREUM {CryptoDATA['ethereum']?.['chf']} {parseFloat(CryptoDATA['ethereum']?.['chf_24h_change'])?.toFixed( 2)}

React/NextJS 状态问题

React/NextJS state issues

reactjs

next.js