Mapping 안에서 api

[iriver90]

안녕하세요~ 항상 강의 잘 듣고 있습니다. 질문은 처음이에요~

맵안에서 data의 id값을 함수의 인자 값으로 전달하고 , 함수에서 전달받은 id값으로 api 값을 받아서 리턴해서 뿌려주고 싶은데
이런 식으로 하면 계속 return 값이 없다고 화면에 나오 지가 않네요. 
비동기 문제 같아서 async await를 함수에서 사용하려고 하니 깐 에러가 나네요..

       {data ? (
              data?.map((item) => {
                return (
                  <li key={item.id}>
                    <div>{renderDetailData(item.id)}</div>

); }) ) : ( <p>검색 결과가 없습니다</p> )}

 

함수

 

const renderDetailData = (id) => {
let resultSendData = null;
const url = `www.임의로&ID=${id}`;
axios
.get(url)
.then((response) => {
if (response.status === 200) {
resultSendData = response.data;
return resultSendData;
}
return resultSendData;
})
.catch(function (error) {
console.log("실패");
});
return <p>{resultSendData}</p>;
};

[iriver90]

에러코드, 아래와 같이 두개가 나옵니다
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
Uncaught (in promise) Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

[codingapple]

html중간에 array나 object자료를 그대로 집어넣으면 그런에러가 뜹니다 
array자료에서 문자나 숫자만 뽑아서 집어넣읍시다 

[iriver90]

그렇게 했는데, 똑같이 에러가 뜹니다.. 테스트 하려고 return 값들을 그냥 string으로 해줘도 저러네요...
도저히 모르겠습니다. 도와주세요 선생님 ㅠㅠ, console 로그에 찍어보면 api에서 요청값은 제대로 나오는데 return 값에만 넣으면 저러네요..

[codingapple]

ajax요청하는함수를 통째로 html사이에 넣는거보단
state하나 만들고 useEffect에서 ajax요청성공시 결과를 state에 넣는 식으로 코드짭시다

[iriver90]

안에 state하나 만들고 useEffect에서 ajax요청성공시 결과를 state에 넣는 방법은 지금 제 상황에서 안 맞는거 같아서요..

html 사이에 넣은 이유가 html안에서 맵핑하면서 나온 데이터 아이디값을 가지고 ajax요청해서 결과값을 그 맵핑 안에 넣어주려고 해서 저렇게 했는데,
혹시 다른 방법이 있을까요? 

[codingapple]

data도 컴포넌트안에 있는 변수면 useEffect안에서 쓸 수 있을텐데 
useEffect안에서 data를 반복문 돌려서 ajax요청하면 됩니다 
그래야 나중에 별문제 없을걸요

[iriver90]

감사합니다~ 다른 방법으로 했습니다

[글쓴이]

글