使用useEffect获取API时出现问题

Question

我现在正在处理API链接。我编写了一个代码，每当组件第一次渲染并且userName的值发生变化时，通过重新渲染来接收API值。然而，错误"；未捕获的类型错误：destroy不是一个函数"发生，并且该值不会进入控制台。我认为我写错了代码，但我应该怎么做才能将值输入控制台？此外，它在其他地方声明，但每当通过onChange输入值时，userName就会通过setUserName更改。如果你让我知道，我将不胜感激，谢谢！

用户.jsx:

import React, { useEffect, useState } from 'react'
import styled from 'styled-components';
import axios from 'axios';
const InputWrap = styled.div`
align-items: center;
-webkit-appearance: none;
background: rgb(250, 250, 250);
border: 1px solid rgb(219, 219, 219);
border-radius: 3px;
box-sizing: border-box;
color: rgb(38, 38, 38);
display: flex;
flex-direction: row;
font-size: 14px;
position: relative;
width: 100%;
`
function SignUpUserInput({userName,setUserName}) {
useEffect (async()=> {
try{
const userData = await axios({
method : 'get',
url : `https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080/users/checkid?id=${userName}`
})
console.log(userData);
}
catch(error) {
alert(error);
}
},[userName])
return (
<InputWrap>
<label className='inputLabel'>
<span className='inputHover'>
name
</span>
<input className='inputInput' value={userName} onChange={(e)=>{setUserName(e.target.value)}}/>
</label>
</InputWrap>
)
}
export default SignUpUserInput;

固定

useEffect (()=> {
async function fetchData () {
try{
const userData = await axios({
method : 'get',
url : `https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080/users/checkid?id=${userName}`
});
console.log(userData);
}
catch(error) {
alert(error);
}
}
fetchData();
},[])

Answer 1

useEffect()回调函数不应为async

useEffect(() => {
// declare a async func
async function fetchData() {
try {
const userData = await axios({
method: "get",
url: `https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080/users/checkid?id=${userName}`,
});
console.log(userData);
} catch (error) {
alert(error);
}
}
fetchData();
}, []);