[TIL+DevLog]各種エラー修正…!2021/12/10

今日はいろいろな間違いを修正しました.

有効期限が切れたときにログアウトできない問題

  const logoutHandler = () => {
    // axios 요청
    instance
      .get('/users/logout')
      .then((res) => {
        console.log(res);
        localStorage.removeItem('lumiereUserInfo');
        setIsLogin(false);
        history('/');
      })
      .catch((err) => {
        console.log(err);
      });
  };

この問題はcatch部分が例外処理を行わなかったことに起因する.

.catch((err) => {
        console.log(err);
        localStorage.removeItem('lumiereUserInfo');
        setIsLogin(false);
        history('/');
      });

したがって,catch文は前述のように例外的に処理された.ただし、ログアウトで解決するのではなく、各ページに入るときにタグが有効かどうかをチェックし、無効であれば強制的にログアウトします.

ページ名によるタイプの変更

export interface Order {
  orderItems: [
    {
      image: string;
      title: string;
      artist: string;
      size: string;
      price: number;
    },
  ];
  result: {
    id: string;
    paidAt: Date;
    status: number;
    updatedAt: Date;
  };
  deliver: {
    address: string;
    receiver: string;
    request: string;
  };
  ordererInfo: {
    name: string;
    phoneNum: string;
    email: string;
    refundTerms: string;
  };
  shippingPrice: number;
  totalPrice: number;
  // deliveredAt: Date;
  user: {
    name: string;
    _id: string;
  };
  _id: string;
}

もともとこのタイプだったのですが、ページとページを入れて

export interface Order {
orders: [
  {
    orderItems: [
      {
        artist: string;
        image: string;
        price: number;
        product: string;
        size: string;
        title: string;
      },
    ];
    result: {
      id: string;
      paidAt: string;
      status: number;
      updatedAt: string;
    };
    totalPrice: number;
    user: {
      general: {
        email: string;
      };
      kakao?: string;
      naver?: string;
      google?: string;
      name: string;
      _id: string;
    };
    _id: string;
  },
];
page: number;
pages: number;
}

こんな風に変えて...タイプが変わったので、中身も全部変えて、最初は昔のように

const [orderList, setOrderList] = useState<Array<Order>>([]);

これにより初期値が設定されますが、配列内の要素をマッピングすると常にundefinedが表示され、結果は以下のようにすべての初期値が書かれます.

 const [orderList, setOrderList] = useState<Order>({
    orders: [
      {
        orderItems: [
          {
            artist: '',
            image: '',
            price: 0,
            product: '',
            size: '',
            title: '',
          },
        ],
        result: {
          id: '',
          paidAt: '',
          status: 0,
          updatedAt: '',
        },
        totalPrice: 0,
        user: {
          general: {
            email: '',
          },
          kakao: '',
          naver: '',
          google: '',
          name: '',
          _id: '',
        },
        _id: '',
      },
    ],
    page: 0,
    pages: 0,
  });

作品/作家カタログの入力リストにページ名が入っていて、すべての構造を変更せざるを得ませんが、JavaScriptであれば仕事ではありませんが、タイプスクリプトを使うのは大変です!他に方法があるに違いない.調べられなかったのは少し残念だ.