2023-12-28T11:33:30.362Z

0

package.json 입니다!!
앤트 디자인 아이콘 버전은 4.2.1 입니다!

1

카드 안에 다른 글자들 넣으면 그 글자는 보이나요?? 카드 사용법이 달라졌던것 같은 기억이 나서요

0

          <Card actions={[
            <Card title="카드텍스트1">Card content</Card>,
            <StopOutlined key="stop" onClick={onCancel(item.id)}
            title="카드텍스트2" />
          ]}>
            <Card.Meta description={item.nickname} title="카드텍스트3" />
          </Card>

FollowList.js

Card 안에 title로 글자를 넣어보았으나
목록에 사용자 이름과 아이콘이 보이지 않습니다!
이 경우 로그인 요청 로딩이 이어지며 새로고침(F5)을 한 번 해야만 로그인이 됩니다.

1

문제가 없어보이는데 희한하네요. console.log(data) 했을 때 데이터 출력되나요?

0

// 팔로우 리스트 컴포넌트(사용자 정의 태그)
const FollowList = ({ header, data }) => {

  // onCancel : item에 대한 데이터를 보내기 위한 고차함수 사용
  const dispatch = useDispatch();
  const onCancel = (id) => () => {  // id는 반복문에 대한 데이터
    ...
  };

  console.log(data); // * 콘솔로그 *
  return (
    ...
    <Card actions={[<StopOutlined key="stop" onClick={onCancel(item.id)} />]}>
      <Card.Meta description={item.nickname} />
    </Card>
  );
);

FollowList.js

return 위에서 console.log(data) 했을 때
팔로우한 사용자의 data가 콘솔에 출력됩니다!

백엔드 터미널에는 304 메시지가 뜹니다!

늦은 시간까지 알려주셔서 정말 죄송하고 감사합니다 제로초님!
문제를 정말 해결하고 싶습니다!

1

카드가 잘못되었든지, List.Item이 잘못되었든지 할 걸 같은데요. 정확히 어디 부분이 원인인지를 확인해야 합니다. 이런건 노하우를 알고 계셔야 하는데요. renderItem 부분을 다른 컴포넌트로 넣어보는 겁니다. 그게 잘 나오면 List.Item이나 Card가 문제인거고, 그것도 안 나오면 List가 문제인 거겠죠.

0

제로초님! 문제 해결했습니다!
알려주신 방법으로 파악해보았으나 List.Item, List, Card는 문제가 없었고,
renderItem의 item 부분에서 중괄호를 잘못 사용한 것이 원인이었습니다!

      // 문제의 코드
      renderItem={(item) => {
        <List.Item style={{ marginTop: '20px' }}>
          <Card actions={[
             <StopOutlined key="stop" onClick={onCancel(item.id)} />
          ]}>
            <Card.Meta description={item.nickname} />
          </Card>
        </List.Item>
      }}

      // 문제를 수정한 코드
      renderItem={(item) => (
        <List.Item style={{ marginTop: '20px' }}>
          <Card actions={[
            <StopOutlined key="stop" onClick={onCancel(item.id)} />
          ]}>
            <Card.Meta description={item.nickname} />
          </Card>
        </List.Item>
      )}

항상 오타에 주의해야 겠어요...!!
문제 해결에 도움을 주셔서 감사합니다 제로초님! 좋은 주말 보내세요!!

2023-12-28T11:31:42.380Z

0

해당 방법으로 해결하지 못해서 질문을 올렸습니다!