array.map()을 했을 때 내부 값을 외부로 꺼내는 방법

JavaScript
1

react 작업입니다.

​

axios.get을 통해 데이터 10개를 호출하고 그것을 map으로 뿌려줬습니다.

각각 뿌려진 아이템들의 id값을 가지고

axios.post를 통해 새로운 데이터를 가져와서 뿌려준 map에 데이터를 넣어줘야하는데

​

이미 뿌려진 map의 값을 뽑는 방법과

뽑은 데이터를 통해 받아온 값을 각각 화면에 보여주는 방법을 잘 모르겠습니다.

const [data, useData] = useState([])        // 받아온 데이터가 10개

const getData = async () => {                // 초기 데이터 배열 가져오기
    try {
        const result = await axios.get(
            "url/getlistData"
        )
        setData(result.data)
    } catch (e) {
        console.log("error", e)
    }
}

...

return (
    {data.map((el) => (
        <div key={el.id}>
            <div>{el.name}</div>
            <div>{el.price}</div>
            <div>{상태}</div>
        </div>
    ))}
)

이렇게 10개의 객체 데이터가 담긴 배열을 가지고 와서 map으로 뿌려주면

각각 생성된 id값을 가지고와서

const getData2 = async () => {
    try {
        const result2 = await axios.post(
            "url/postStatus",
            id : id                // id: id를 id로 간단하게 하는 방법은 알고 있습니다.
        )
        console.log("result2", result2)        // 해당 id값을 post하면 {상태}의 값이 나옵니다.
    } catch (e) {
        console.log("error", e)
    }
}

저렇게 넣어주면 해당 값이 나옵니다.

​

다만 문제는 저 id 값에는 map으로 생성된 id 배열값을 넣을 수 없고

id : 1 (o)

id : [1,2,3,4,5,6,7,8,9,10] (x)

하나씩 넣어서 결과를 얻고 그것을 넣어줘야하는데요

​

api 수정은 할 수 없어서 지푸라기라도 잡고자 여기에 글을 올립니다.

제발 도와주세요…

​

** 임의로 작성한 코드입니다.

2

get해서 가져온 데이터를 뿌릴때
컴포넌트로 만들어서 거기서 post호출하면 되지않나요?
아니면
get으로 데이터 가져온 후
id만 배열로 가져와소 post 보낼때 parameter로 보내면 될거같은데… 이건 안된다고 하셨나;

3

아래와 같이 적용하시면 될것같습니다

const resultPromise = result.data.map(async (data)=>{
const detailData = await axios.post(data.id)
data.detailData = detailData;
return data
})

promise.all(resultPromise).then((data)=>{setData(data)})

4

풀어나갈 수 있는 귀한 조언 주신셔서 진심으로 감사드려요!!
사실 이렇게 해볼까? 라는 생각은 많이 해봤지만 실제로 코드작성을 하려니 감이 안잡히더라고요
아래 JJUN님의 코드를 보고 생각하고 이해해서 작성했더니 무사히 데이터를 잘 받아왔습니다.
그래도 의견 주신 부분 진짜 감사해요

처음 계획은
get으로 배열 10개의 데이터(기본)를 가져와서 화면에서 보여줘야하기 때문에 jsx에서 map으로 뿌려주고,
map으로 뿌려진 데이터들의 id값을 불러와서
post로 뿌려주려 했으나 map으로 돌려서 나온 값을 따로 빼서 post를 할 수 없더라고요! 그래서 첫번째 방법은 장렬히 실패했습니다…ㅠㅠ

다음 방법으로는 get으로 얻은 배열에서 id값을 따로 뺐지만
각각 post에는 파라미터로 배열을 넣을 수 없고 하나씩만 넣어야해서 해당 방법도 실패했습니다.
또 내용을 불러왔다고해도 불러온 값과 기존의 데이터의 짝이 맞게 합치는 방법도 너무 가늠조차 안됐습니다.

혹시 말씀해주신 방법이 제가 말한것과 다른거라면 제가 부족해서 이해를 잘못한거니 따끔하게 한마디 해주셔도 좋습니다! 해결은 했지만 말씀해주신 부분을 조금 더 풀어서 설명해주실 수 있다면 부탁드립니다!

5

정말 감사해요!
주신 코드 읽어보고 콘솔찍으면서 어떻게 흘러가는지 이해했어요!
알려주신 코드로 데이터 잘 받아왔습니다!!
다음에 이런 상황이 온다면 꼭 잊지 않고 잘 풀어나가겠습니다.
아직 갈길이 머네요… 그래도 진짜 진짜 진심으로 감사드려요!