[Solved]-Can't assign response data to the state data and the response is not empty in React-Reactjs

Appended new state to the previous other than replace, code may be like this.

class App extends Component {
  constructor(props) {
    super(props);
    let data;
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading",
    };
  }

  async componentDidMount() {
    let data;
    axios
      .get("http://127.0.0.1:8000/api/", {
        headers: {
          Authorization: "Token 8651a2b6c28ecd5cd25c0e67dfd7f3642a3d0029",
        },
      })
      .then((res) => {
-        this.setState(() => {
-          return {
-            data: res,
-            loaded: true,
-          };
-        });
+        this.setState((prev) => {
+          return {
+            data: prev.data.concat(res),
+            loaded: true,
+          };
+        });
      })
      .then(console.log(this.state.data));
  }
}

setState works asyncrounsly and it's possible that the state is not updated when you call console.log in then. setState actually accepts a callback as its second argument, in which you can check the updated state:

this.setState(() => {...}, () => { console.log(this.state.data) })

Btw, considering your new state doesn't rely on the previous state, you can just pass an object to setState instead of a function:

this.setState(
    {
        data: res,
        ...
    },
    () => {
        console.log(this.state.data)
    }
)

Try the following... Change your setState to setState({...}) and remember the loading

import React, { Component } from "react";

const arrayOne = [
  {
    id: 1,
    nome: "Ruan"
  },
  {
    id: 2,
    nome: "Paul Symon"
  },
  {
    id: 3,
    nome: "Renan Lucas"
  }
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: true
    };
  }

  async componentDidMount() {
    setTimeout(() => {
      this.setState({ data: arrayOne, loading: false });
    }, 1000)
  }

  render() {
    return (
      <div>
        {this.state.loading ? (
          <h1>Carregando...</h1>
        ) : (
          <div>
            {this.state.data.map((i) => {
              return <h1>{i.nome}</h1>;
            })}
          </div>
        )}
      </div>
    );
  }
}