axios를 통해 얻은 id를 파라미터에 넣기

해당 table에는 한 학생의 상담내역이 나온다.
그래서 studentId는 같지만 각 상담 내역이 다르기 때문에 con_id로 구분되어 있다.
따라서 해당 No을 누르면 각 con_id에 맞는 정보가 counselDetail 페이지에 나오게 파라미터에 넣어야 한다.

1.우선 axios get으로 먼저 studentId를 받아오기

useEffect(() => {
    axios
      .get(`경로명/${studentId}`)
      .then((response) => {
        setUserData(response.data);
        console.log("data", response.data);
      })
      .catch((error) => {
        console.log("오류", error);
      });
  }, []);

2. axios get으로 con_id를 불러와야 한다.

useEffect(() => {
    axios
      .get(`경로명/${studentId}/consulting`)
      .then((response1) => {
        setConsulInfo(response1.data);
        const conIds = response1.data.map((item) => item.con_id);
        console.log("상담 불러오기 성공!", response1.data);
        console.log("conIds", conIds);
        setConIds(conIds);
      })
      .catch((error) => {
        console.log("오류", error);
      });
  }, [studentId]);

콘솔로 확인해보면 저렇게 studentId가 1번인 학생의 상담 내역이 consultInfo라는 배열에 저장된 걸 볼 수 있다. 그래서 난 저기서 con_id만 따로 추출해서
counselDetail 이라는 페이지에 넘어갈 수 있도록 파라미터에 넣어야 한다.

3. con_id 추출

const [conId,setConId]=useState([]);


const conIds = response1.data.map((item) => item.con_id);
        console.log("상담 불러오기 성공!", response1.data);
        console.log("conIds", conIds);
        setConIds(conIds);

그럼 이렇게 나온다.

4. 그럼 table에서 해당 td를 누를경우
   각 con_id에 해당하는 정보가 담겨있는 페이지로 이동하게 해야한다.

<TableContainer>
        <thead>
          <Tr>
            {headers.map((header, index) => (
              <Th key={index}>{header}</Th>
            ))}
          </Tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <Tr key={index}>
              <Td onClick={() => onTdClick(index)}>{index + 1}</Td>
              {headers.slice(1).map((header, columnIndex) => (
                <Td key={columnIndex}>{row[header]}</Td>
              ))}
            </Tr>
          ))}
        </tbody>
      </TableContainer>

table 코드는 다음과 같이 구성되어 있다.
그래서 해당 index를 누를 경우 이동하게 하는 onTdClick 함수를 생성해줬다.

const onTdClick = (index) => {
    const conId = conIds[index];
    // const conId = conIds.map((item) => item);
    router.push(
      `/AcademyManagement/StudentManagement/counsel/CounselDetail?id=${studentId}&conId=${conId}`
    );
  };

이때 사용자가 클릭한 행의 인덱스를 사용하여 해당하는 con_id를 선택하게 하면 되는 것인데....

const onTdClick=(conId)=>{
  const conId = conIds.map((item) => item); ~~
)} 

난 자꾸 이렇게 conId로 넣어버리니까 계속 얘가 undefined 였던 것이다..그냥 해당 index를 기준으로 하면 이리 간단한 것을...어제부터 자꾸 이 부분이 막혀서 애먹고 있었다..

이렇게 했더니! 결국! 해당 인덱스를 클릭하면
각 conId에 따른 정보가 담긴 페이지가 잘 연결되고, url에 id 부분도 잘 자동으로 바껴서 나오는 것이다~~성공..!!