Atas sebab tertentu kod saya hanya dipaparkan sekali dan apabila saya memuat semula halaman saya mula mendapat ralat

Question

rreeee

Atas sebab tertentu kod saya hanya dipaparkan sekali dan apabila saya memuat semula halaman saya mula mendapat ralat. Saya rasa ia ada kaitan dengan useEffect tetapi saya tidak tahu

TypeError: Tidak boleh membaca sifat yang tidak ditentukan (baca 'terakhir'). Saya mendapat ralat ini.

Answer 1

Apabila anda memproses data daripada api, anda harus menggunakan perantaian pilihan kerana data itu mungkin atau mungkin tidak:

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;