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("서버 통신 실패");
});
}
CodePudding user response：
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