CODEWITHSUNDEEP
reactjs
MontaKr
MontaKr

Reputation: 155

There is a problem with getting API using useEffect

I'm working on the API link now. I made a code that receives the API value by re-rendering whenever the component was first renders and the value of userName changes. However, the error "Uncaught TypeError: destroy is not a function" occurs and the value does not come into console. I think I wrote the wrong code, but what should I do to get the value into the console? Also, it was declared elsewhere, but whenever a value is entered through onChange, the userName is changed through setUserName. I'd appreciate it if you let me know thanks!

User.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;

fixed

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();
},[])

Upvotes: 0

Views: 33

Answers (1)

Shahed
Shahed

Reputation: 1885

useEffect() callback function should'nt be 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();
  }, []);

Upvotes: 2

Related Questions