使用useEffect调用API时遇"destroy is not a function"错误的解决咨询

问题场景 #

开发API调用功能时，组件首次渲染及userName值变化时触发API请求，出现Uncaught TypeError: destroy is not a function错误，控制台无法输出数据。userName通过输入框onChange事件调用setUserName更新。

原出错代码 #

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：

• async函数的返回值是Promise对象，而React要求useEffect的回调要么返回一个清理函数（用于组件卸载或依赖更新时执行清理操作），要么返回undefined。
• React会把返回的Promise当作清理函数去调用，导致抛出destroy is not a function错误（因为Promise不是函数）。

正确修复方案 #

在useEffect内部定义异步函数并调用，同时保留[userName]作为依赖数组，确保userName变化时重新触发API请求：

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 function fetchUserData() {
    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);
    }
  }
  // 调用异步函数
  fetchUserData();
}, [userName]) // 保留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回调，而是在内部创建异步函数并执行。
• 依赖数组[userName]必须保留，否则只有组件首次渲染时才会请求API，userName变化后不会触发新请求。

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