안녕하세요. 며칠 째 해결하지 못해 질문드립니다 ㅠ 일단 저는 리액트 초보인데요,
API 서버에서 클릭시 입력한 쿼리와 주소를 합해서 데이터를 받아오고 보여주는 것을 하고 싶은데요,
일단 받아오는 것은 되나, 순서가 이상합니다...
예를 들어 china 입력->클릭 시, 바로 china의 데이터가 페이지에 띄워져야하는데 바로 띄워지지않고, Korea를 입력 후 클릭시 -> china의 데이터가 띄워집니다. 그리고 다시 Japan을 입력하고 클릭해야 china의 데이터가 띄워집니다 ㅠ... 구글링해서 많은 글들을 보고 따라서 해봤지만 똑같이 한 번 더 클릭하고 렌더링을 하고나서야 그 이전에 원했던 데이터가 띄워지는데 뭐가 문제일까요? axios도 써보고 fetch도 써보고 useEffect의 두번째 인자값을 다 바꿔보고 해도 안되는데 이 컴포넌트의 문제가 아닌걸까요?
알려주시면 감사하겠습니다 !!
import React, {useState, useEffect} from 'react';
import axios from 'axios';
const Search = () => {
const [datas,setDatas] = useState([]); //[]만 되는 듯?
const [query,setQuery] = useState('None');
const [url, setUrl] = useState(
'http://localhost:8080/api/home/'
)
const [ex,setEx] = useState('None');
useEffect(()=> {
const fetchData = async ()=> {
const result = await axios(`http://localhost:8080/api/home/${query}`);
setDatas(result.data);
};
fetchData();
const items = [];
datas.map((item,index)=>{
items.push(item);
console.log("item : "+items[index].country_name);
});
},[url]);
return(
<div>
<input
type="text"
value={query}
onChange={e=>setQuery(e.target.value)}
/>
<button onClick={()=>setUrl(`http://localhost:8080/api/home/${query}`)}>click</button>
</div>
);
}
export default Search;
