인프런 커뮤니티 질문&답변

import React from "react";
import { Button, Avatar } from "antd";
import "./Suggestion.scss";

//프레젠테이션 컴포넌트라 할 수 있다
export default function Suggestion({ suggestionUser, onFollowUser }) {
  const { username, avatar, is_follow } = suggestionUser;
  return (
    <div className="suggestion">
      <div className="avatar">
        <Avatar icon={<img src={avatar} alt={`${username}'s avatar`} />} />
        {/* <UserAddOutlined /> */}
      </div>
      <div className="usesrname">{username}</div>
      <div className="action">
        {is_follow && "팔로잉 중"}
        {!is_follow && (
          <Button size="small" onClick={() => onFollowUser(username)}>
            Follow
          </Button>
        )}
      </div>
    </div>
  );
}

import React, { useEffect, useState } from "react";
import "./SuggestionList.scss";
import { Card } from "antd";
import Suggestion from "./Suggestion";
import { useAppContext } from "store";
import Axios from "axios";
import useAxios from "axios-hooks";

export default function SuggestionList({ style }) {
  const {
    store: { jwtAccessToken },
  } = useAppContext();

  const [userList, setUserList] = useState([]);

  //axios을 좀더 일반적으로 쓰기위한 훅을 이용 useAxios hook
  //useEffect자체가 필요없다 요청자체를 useAxios가 보내게 되니까?
  //useAxios는 조회를 할때는 유용한다 post을 할때는 코드가 복잡해진다?
  const headers = { Authorization: `Bearer ${jwtAccessToken}` };
  const [{ data: origUserList, loading, error }, refetch] = useAxios({
    url: "http://127.0.0.1:8000/accounts/suggestions/",
    headers,
  });

  useEffect(() => {
    if (!origUserList) setUserList([]);
    else
      setUserList(origUserList.map((user) => ({ ...user, if_follow: false })));
  }, [origUserList]);

  const onFollowUser = (username) => {
    console.log("성공");
    try {
      Axios.post(
        "http://127.0.0.1:8000/accounts/follow/",
        { username },
        { headers }
      )
        .then((response) => {
          setUserList((prevUserList) => {
            return prevUserList.map((user) => {
              if (user.username === username) {
                return { ...user, is_follow: true };
              } else return user;
            });
          });
        })
        .catch((error) => {
          console.log(error);
        });
    } catch (error) {
      console.log("여기 에러야 :", error);
    }
  };

  return (
    <div style={style}>
      {/* 정말 빠르게 지나갈 것이다 */}
      {loading && <div>Loading...</div>}
      {error && <div>로딩중에 에러가 발생했습니다.</div>}

      {/* <button onClick={() => refetch()}>Reload</button> */}
      <Card
        size="small"
        title="Suggestions for you"
        // extra={<a href="#">More</a>}
        style={{
          width: 300,
        }}
      >
        {userList.map((suggestionUser) => (
          <Suggestion
            key={suggestionUser.username}
            suggestionUser={suggestionUser}
            onFollowUser={onFollowUser} //속성값으로 주입함
          />
        ))}
      </Card>
    </div>
  );
}

첫번째 블럭이 Suggestion.js이고 두번째 블럭은 SuggestionList.js입니다.

follow 버튼을 눌렀을때 이러한 에러가 뜨기 시작했는데 왜 그런걸까요ㅠㅠ 분명 원래는 잘 되었는데 학습진도를 더 나가다 보니 어느순간 작동하지 않던데 그 이유를 잘 모르겠습니다 서버쪽으로 요청도 가지 않는거 같은데 서버쪽의 문제일 수 있을까요??