React中使用Axios获取数据，如何让控制台仅打印目标字符串？

我尝试使用Axios从https://jsonplaceholder.typicode.com/users提取数据，目前已接近目标，但控制台打印的是Promise对象。请问如何让控制台仅打印出“Leanne Graham”？我曾尝试在name后添加.resolve()，但没有效果。

我的代码如下：

import React from "react";
import ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import axios from "axios";

const BASEURL = "https://jsonplaceholder.typicode.com/users";


function axiosTest() {
    return axios.get(BASEURL).then(response => response.data[0].name)
}

function Component1(){
console.log(axiosTest());
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

axiosTest()返回的是Promise对象，直接打印只会输出Promise实例，必须等待异步操作完成后再获取结果，以下是两种可行方案：

方案1：使用.then()链式调用 #

修改Component1函数，通过.then()获取异步操作的最终结果并打印：

function Component1(){
  axiosTest().then(name => {
    console.log(name); // 输出"Leanne Graham"
  });
}

方案2：使用async/await语法 #

将Component1声明为异步函数，用await等待Promise完成后再获取结果：

async function Component1(){
  const name = await axiosTest();
  console.log(name); // 输出"Leanne Graham"
}

补充说明 #

• 你之前在name后加.resolve()的操作是错误的：response.data[0].name是普通字符串，不是Promise对象，.resolve()是Promise类的方法，仅能用于Promise实例。
• 如果需要在React组件中渲染该数据，建议结合useState和useEffect管理异步状态：

import { useState, useEffect } from "react";

function Component1(){
  const [name, setName] = useState("");

  useEffect(() => {
    axiosTest().then(fetchedName => {
      setName(fetchedName);
      console.log(fetchedName);
    });
  }, []);

  return <div>{name}</div>;
}

内容的提问来源于stack exchange，提问作者DennisM