Aus irgendeinem Grund wird mein Code nur einmal angezeigt und wenn ich die Seite aktualisiere, erhalte ich Fehlermeldungen

Question

import React from "react";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";

const SingleUser = () => {
  const [user, setUser] = useState([]);
  const { username } = useParams();

  useEffect(() => {
    const getSingleUser = async () => {
      try {
        const res = await fetch(
          `https://api.chess.com/pub/player/${username}/stats`
        );
        const data = await res.json();
        const heroesArray = Object.values(data);
        setUser(heroesArray);
        console.log(heroesArray[0].last);
      } catch (error) {
        console.error(error);
      }
    };

    getSingleUser();
  }, []);

  return (
    <section>
      <div>
        <h1>Rapid Chess</h1>
        <p>Current Rating: {user[0].last.rating}</p>
        <p>Best Rating: {user[0].best.rating} </p>
        <div>
          <p>Wins: {user[0].record.win} </p>
          <p>Losses: {user[0].record.loss} </p>
          <p>Draws: {user[0].record.draw} </p>
        </div>
      </div>
     
    
    </section>
  );
};

export default SingleUser;

Aus irgendeinem Grund wird mein Code nur einmal angezeigt und wenn ich die Seite aktualisiere, erhalte ich Fehlermeldungen. Ich denke, es hat etwas mit useEffect zu tun, aber ich weiß es nicht

TypeError: Eigenschaft von undefiniert kann nicht gelesen werden (lesen Sie „last“). Ich erhalte diese Fehler.

Answer 1

当您处理来自 api 的数据时，您应该使用 可选链，因为数据可能会也可能不会：

import React from "react";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";

const SingleUser = () => {
  const [user, setUser] = useState([]);
  const { username } = useParams();

  useEffect(() => {
    const getSingleUser = async () => {
      try {
        const res = await fetch(
          `https://api.chess.com/pub/player/${username}/stats`
        );
        const data = await res.json();
        const heroesArray = Object.values(data);
        setUser(heroesArray);
        console.log(heroesArray?.[0]?.last);
      } catch (error) {
        console.error(error);
      }
    };

    getSingleUser();
  }, []);

  return (
    

      

        
Rapid Chess
        
Current Rating: {user?.[0]?.last?.rating}
        
Best Rating: {user?.[0]?.best?.rating} 
        

          
Wins: {user?.[0]?.record?.win} 
          
Losses: {user?.[0]?.record?.loss} 
          
Draws: {user?.[0]?.record?.draw} 
        
      
     
    
    
  );
};

export default SingleUser;