Failed to get API result value called from external js file ( React )

Question

I made an api call from extrenal js file and import that file to get result of it.

The API call was successful, but the resulting value was not received from the external js file.

How can I get the API data that I called from the external js file?

I'll show my code below.

ConcertForm.js (The place that import external js file)

import React,{useState,useEffect} from 'react';
import Form from 'react-bootstrap/Form';
import StoreData from '../../common/container/StoreData';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { getKpopList } from '../container/GetKpopList'; //external js file

function ConcertForm(props){
    
    const [kpop,setKpop] = useState();

    useEffect(() => {  //the place that I will call external js file to call api
        let kpopList;
        const fetchData = async() =>{

            console.log("가즈아");
            kpopList = await getKpopList();
            console.log("kpop list : "+kpopList);
        }
        fetchData();
    });

    const [starName,setStar] = useState("");
    const [name,setName] = useState("");
    const [explain,setExp] = useState("");
    const [file,setFile] = useState("");
    const [startDate, setStartDate] = useState("");
    const [endDate, setEndDate] = useState("");
    const [lat, setLat] = useState("");
    const [lng, setLng] = useState("");

    const [starDis,setStarDis] = useState(false);
    const [nameDis, setNameDis] = useState(false);
    const [expDis, setExpDis] = useState(false);
    const [fileDis, setFileDis] = useState(false);
    const [sdDis, setSdDis] = useState(false);
    const [edDis, setEdDis] = useState(false);
    const [latDis, setLatDis] = useState(false);
    const [lngDis, setLngDis] = useState(false);



    const formValue = {
        name : name,
        explain : explain,
        startDate : startDate,
        endDate : endDate,
        startName : starName,
        lat : lat,
        lng : lng
    }

    const sendData = {
        formValue : formValue,
        file : file,
        dataType : 'notplace' //장소추가인지 아닌지 확인하기 위해
    }
 
    const changedLat = (e) => {
        const check = e.target.value;
        if(check != ""){
            setLatDis(true);
        }else{
            setLatDis(false);
        }
        setLat(check);
    }

    const changedLng = (e) => {
        const check = e.target.value;
        if(check != ""){
            setLngDis(true);
        }else{
            setLngDis(false);
        }
        setLng(check);
    }

    const changedStar = (e) => {
        const check = e.target.value
        if(check != ""){
            setStarDis(true);
        }else{
            setStarDis(false);
        }
        setStar(e.target.value);
    }

    const changedName = (e) => {
        const check = e.target.value
        if(check != ""){
            setNameDis(true);
        }else{
            setNameDis(false);
        }
        setName(e.target.value);
    }

    const changedExp = (e) => {
        const check = e.target.value
        if(check != ""){
            setExpDis(true);
        }else{
            setExpDis(false);
        }
        setExp(e.target.value);
    }

    const changedSd = (date) => {
        let check = date
        if(date.getDate() < new Date().getDate()){
            alert("이미 지난 콘서트는 등록할수 없습니다.");
            setStartDate();
            check="";
        }else if(endDate>startDate){
            alert("콘서트 시작 날짜를 다시 확인해주세요.");
            setStartDate();
            check="";
        }else{
            setStartDate(date); 
        }

        if(check != ""){
            setSdDis(true);
        }else{
            setSdDis(false);
        }
    }
    const changedEd = (date) => {
        let check = date;
        if(date.getDate() < new Date().getDate()){
            alert("이미 지난 콘서트는 등록할수 없습니다.");
            setEndDate();
            check="";
        }else if(date<startDate){
            alert("콘서트 끝나는 날짜를 다시 확인해주세요.");
            setEndDate("");
            check="";
        }else{
           setEndDate(date); 
        }

        if(check != ""){
            setEdDis(true);
        }else{
            setEdDis(false);
        }
    }
    const changedFile = (e) => {
        const check = e.target.value;
        if(check != ""){
            setFileDis(true);
        }else{
            setFileDis(false);
        }
        setFile(e.target.files[0]);
    }

    return(
        <Form>
            <Form.Group className="mb-3" controlId="formName">
                <Form.Label id="label1">가수(그룹)명</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: starDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <Form.Control style={{width:'30%'}} onChange={changedStar}/> {/*onChage됐을때 useState를 통해서 변수 값을 변경함*/}
            </Form.Group>            

            <Form.Group className="mb-3" controlId="formName">
                <Form.Label id="label1">{props.label} 이름</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: nameDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <Form.Control style={{width:'30%'}} onChange={changedName}/> {/*onChage됐을때 useState를 통해서 변수 값을 변경함*/}
            </Form.Group>

            <Form.Group className="mb-3" controlId="formDec">
                <Form.Label>{props.label} 설명</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: expDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <Form.Control style={{width : '30%'}} as="textarea" rows={3} onChange={changedExp}/>
            </Form.Group>
            <Form.Group className="mb-3" controlId="formDec">
                <Form.Label>{props.label} 위도</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: latDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <Form.Control style={{width : '30%'}} onChange={changedLat}/>
            </Form.Group>
            <Form.Group className="mb-3" controlId="formDec">
                <Form.Label>{props.label} 경도</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: lngDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <Form.Control style={{width : '30%'}} onChange={changedLng}/>
            </Form.Group>
            <Form.Group>
                <Form.Label>{props.label} 시작 일정</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: sdDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <DatePicker selected={startDate} onChange={changedSd} />
                <Form.Label>{props.label} 끝나는 일정</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: edDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <DatePicker selected={endDate} onChange={changedEd} />
            </Form.Group>
            <br/>
            <Form.Group controlId="formFile" className="mb-3">
                <Form.Label>{props.label} 사진</Form.Label>
                <div id="nameCheck"style={{color : 'red',fontSize:'20px', display: fileDis ? 'none' : 'inline-block', marginLeft:'10px', alignItems:'center'}}>*</div>
                <Form.Control style={{width : '30%'}} type="file" onChange={changedFile}/>
            </Form.Group>
            {/*API 호출을 담당할 Container Component 호출*/}
            <StoreData disabled={(starDis&&nameDis&&expDis&&sdDis&&edDis&&fileDis&&latDis&&lngDis)} sendData={sendData}></StoreData>
      </Form>
    );
}
export default ConcertForm;

GetList.js(The External js file to call api)

export function getList(setKpop) {
    let list;
    axios.get('/celebrities')
    .then(function(res){
        console.log(res.data);
        return res.data;
    })
    .catch(function(error){
        console.log(error);
        alert("서버 통신 실패");
    });
}

daza · Accepted Answer · 2022-08-12 17:06:12Z

1

Your getList function should be looking like this:

export async function getList(setKpop) {
    let list;
   return await axios.get('/celebrities')
    .then(function(res){
        console.log(res.data);
        return res.data;
    })
    .catch(function(error){
        console.log(error);
        alert("서버 통신 실패");
    });
}

But generally you could make the api call inside the useEffect and so avoid all the await- async notation (.. and set the result to a state). Btw, you miss the array argument in your useEffect

edited Aug 12, 2022 at 17:06

answered Aug 12, 2022 at 16:55

daza

1111 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codingRookie Over a year ago

What array argument mean in useEffect??(I'm new to react)

daza Over a year ago

w3schools.com/react/react_useeffect.asp you have case 1. here with no dependencies passed, which means your useEffect would run on every rerender. Its not recommendable to have such behavior when you call an api. Instead it makes sense to have either 2. or 3. case, either run it once on first render, alternatively you could pass the function(name) inside the array, but in this case I dont think it would have make practical difference because the value of your function remains the same.

Collectives™ on Stack Overflow

Failed to get API result value called from external js file ( React )

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related