React: Axios response loading on Console but not in DOM-CodePudding

I'm working on a project and I want to obtain only 1 object from GET (using id). It loads correctly on console.log but not on DOM, even using React.useState() and React.useEffect(). But it works well on process like list and create... I've saw another question here about the same, but their answer didn't apply to my case... So I would be very grateful if someone could enlighten me here.

Example Code

api.ts

import axios, { AxiosResponse } from "axios";

axios.defaults.baseURL = "https://url.../api/";

const responseBody = <t>(response: AxiosResponse<t>) => response.data;
const request = {
    get: <t>(url: string) => axios.get<t>(url).then(responseBody),
    post: <t>(url: string, body: {}) => axios.post<t>(url, body).then(responseBody),
    put: <t>(url: string, body: {}) => axios.put<t>(url, body).then(responseBody),
    delete: <t>(url: string) => axios.delete<t>(url).then(responseBody),
};

export default request;

apiArtist.ts

import axios from 'axios';
import { Artist } from "../models/artist";
import request from './api';
const apiArtista = {
    list: () => request.get<Artist[]>("/Artist"),
    add: (data: Artist) => request.post("/Artist", data),
    edit: (data: Artist) => request.put(`/Artist/${data.id}`, data),
    delete: (id: number) => request.delete(`/Artist/${id}`),
    detail: (id: number) => request.get<Artist>(`/Artist/${id}`),
};

try.ts (Component file)

import React, { useEffect } from 'react'
import { Artist } from '../../models/artist';

export function Try(props:any) {
  const [artist, setArtist] = React.useState<Artist>(new Artist());
  function refreshArtist(id:number){
    apiArtist.detail(id).then((res)=>{
        setArtist(res);
        console.log('i artist:',res); //it shows correctly on Console
    }).catch((err) => console.log(err));
  }

  React.useEffect(()=>{
    refreshArtist();
  },[]); // I've also tried here with:
//[artist] //it's like a while true on Console but doesn't update on DOM
//[artist.username] -->executes 2 times like the next 2 ones
//[artist.username===undefined,artist.username===""] (and them alone)
//[artist.username!==undefined,artist.username!==""] (and them alone)
//even without the last param...  React.useEffect(()=>{ ... });
  
  return (<>
      <div>
        <h2>Doing stuff with data</h2>
        {artist.username}  <- it stills doesnt's show up here
        {artist.name} <- neither here
      </div>
  </>)
};

I know the backend works well since I'm able to check the correct response on console... But I don't know why it doesn't update on DOM. (on {artist.username} and {artist.name})

CodePudding user response：

try this

  setArtist(() => res)

CodePudding user response：

You can try to create new Artist() and load Artist from res and do the setArtist(artist)

const [artist, setArtist] = React.useState<Artist>(new Artist());
function refreshArtist(id:number){
    apiArtist.detail(id).then((res)=>{
        let artist = new Artist();
        artist.username = res.username;
        artist.name = res.name;
        setArtist(artist);
        console.log('i artist:',res); //it shows correctly on Console
    }).catch((err) => console.log(err));
}