react中怎么使用axios请求？

问题遇到的现象和发生背景

我想把fetch请求换成axios的请求方式

问题相关代码，请勿粘贴截图
import React, { useState, useEffect } from 'react'
import './04demo.css';
import axios from 'axios'
function Father() {
    //定义State为数组，setState是获得的数据
    const [Statearr, setStatearr] = useState([])//name
    const [countarr, setCountarr] = useState([])//username
    const [Emailarr, setEmailarr] = useState([])//email
    const [Addressarr, setAddressarr] = useState([])//address
    const [isName, setIsName] = useState(true)
    useEffect(() => {
        //fetch请求数据
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((res) => res.json())
            .then(data => {
                console.log(data);
                let list1arr = data.map((post) => {
                    return post.name
                });
                let list2arr = data.map((post) => {
                    return post.username
                });
                let list3arr = data.map((post) => {
                    return post.email
                });
                let list4arr = data.map((post) => {
                    return post.address
                });
                //打印list
                console.log(list2arr)
                console.log(list4arr)
                //将list赋值给setState
                setStatearr(list1arr)
                setCountarr(list2arr)
                setEmailarr(list3arr)
                setAddressarr(list4arr)
            })
            //使用 catch() 去捕获错误
            .catch(err => console.log(err));
    }, [])
    let xxx = isName ? Statearr : countarr
    console.log(xxx)
    //sortName函数，以及字符串的排序方法localeCompare
    const sortName = () => {
        const data = [...Statearr.sort((a, b) => a.localeCompare(b))];
        setStatearr(data);
    }
    console.log(Addressarr)
    return (
        <div >
            {xxx.map(namearr => { return <Son value={namearr} key={namearr} /> })}

            <div id="box3">
                {Addressarr.map(address => { return <div key={address.city}>{address.city} </div> })}
            </div>


            {Emailarr.map(Emailarr => { return <Son value1={Emailarr} key={Emailarr} /> })}


            <button onClick={() => { setIsName(!isName) }}>name更换username</button><hr />

            <button onClick={() => sortName()} >对name排序</button >
        </div>
    )
}
function Son(props) {
  
    return (
        <div>
            <div id="box">
                {props.value}
            </div>
            <div id='box2'>
                {props.value1}
            </div>

        </div>
    )
}
export { Father, Son }
运行结果及报错内容

但是我在引入axios的时候发生了错误，

img

我的解答思路和尝试过的方法

我已经安装了axios

img

直接换就好了没区别，就是要注意一下各种参数名可能不一样

用了 webpack 5？