useSelector로 넘긴 데이터를 map,filter 적용가능하게 하기(filter에 async 먹이기)

프로젝트에서 redux-saga를 써서 비동기 데이터를 다뤄야하는데 ㅠㅠ useSelector로 가져온 데이터를 가지고 

map 함수를 돌리자 ~~is not iterable 이라는 경고와 undefined여서 map 을 사용하지 못한다는 경고가 계속 떴다.

처음엔 배열이 아니면 적용이 안되는건가?싶어(말도안되는 말이지만) 하루종일 콘솔로 typeof만 찍어봤다...

문제는 싱크가 안맞아서 데이터를 못받는 것이였고,

해결방안은 map,filter 함수에 async를 먹이는 것이였고 try catch 구문으로 아래와 같이 만들어보았다.

 

useSelector와 useDispatch는 따로 만들어둔 saga와 reducer에서 가져온 데이터와 리듀서 함수를 적용시킨 것이고

최하단 리턴구문 안의  className에 적용된  css는 테일윈드를 사용해서 길어진것이다.

초보 개발자이지만 어찌저찌 이틀내내 고생하여 만든 코드라 혹시라도 같은 부분에서 에러 나는 분들께 도움이 될까하여 올려본다. 

import React, { useState, useRef, useEffect } from "react";
import { useHistory } from "react-router";

/*redux*/
import { getUsers } from "../../../redux/actions/actions";
import { useSelector, useDispatch } from "react-redux";
import { delay } from "redux-saga/effects";

const MobileLogin = (props) => {

  const history = useHistory();
  const refId = useRef();
  const refPass = useRef();
  const [modal, setModal] = useState(false);
  const [logininput, setLogininput] = useState({
    userId: "",
    pass: "",
  });

  /*login useSelector*/
  const dispatch = useDispatch();
  const users = useSelector((state) => state.users.users.patientList);

  useEffect(() => {
    dispatch(getUsers());
  }, []);

  /*show modal*/
  const showModal = () => {
    setModal(!modal);
  };

  //onChange
  const handleOnChange = (e) => {
    setLogininput({
      ...logininput,
      [e.target.name]: e.target.value,
    });
  };

//map함수로 찾은 user들을 async await으로 싱크 맞춰주고 filter로 조건식을 갖춘 로그인 함수 만들기
  async function correctUser() {
    try {
      const correct = await users.filter(
        (el) => el.userId === logininput.userId && el.pass === logininput.pass
      );
      console.log(correct);
        //find db
      if (
        correct
      ) {
        alert(`${logininput.userId}님 반갑습니다`);

        history.push("/sform/1");
      } else {
        alert("아이디와 비밀번호를 확인해주세요");
      }
    } catch (e) {
      console.log(e);
    }
  }

  return (
    <>
      <section id="MobileLogin" className="w-full h-full">
        <div className="m_title flex items-center flex-col pt-36">
          <span
            className="mtit_logo block bg-gray-300 w-44 h-44"
            style={{
              borderRadius: "1em",
            }}
          ></span>

          <span className="mtit_txt text-lg mt-12 block">
            텍스트
          </span>
          <span className="mtit_txt text-lg">
            <strong className="or-txt-5" style={{ fontWeight: "inherit" }}>
            텍스트
            </strong>
            텍스트
          </span>
        </div>
        <div
          className="kakao_login yl-back-5 max-w-xs mx-auto w-full h-14 mt-12 text-base flex justify-center items-center cursor-pointer"
          onClick={showModal}
        >
          카카오 1초 로그인/회원가입
        </div>
        {modal ? (
          <>
            <div className="flex justify-center items-center mt-10">
              <form className="flex" onChange={handleOnChange}>
                <p>아이디</p>
                <input
                  ref={refId}
                  name="userId"
                  type="text"
                  className="border"
                />

                <p>비밀번호</p>
                <input
                  ref={refPass}
                  name="pass"
                  type="password"
                  className="border"
                />
              </form>
            </div>
            <div className="flex justify-center items-center mt-5">
              <button
                onClick={correctUser}
                className="bg-gray-100 p-2 hover:bg-gray-200"
              >
                로그인/회원가입
              </button>
            </div>
          </>
        ) : null}
        {/* <span
          className="absolute bottom-10 right-5 bg-red-300 p-3 text-white cursor-pointer"
          // onClick={kakaoLogout}
        >
          logout
        </span> */}
      </section>
    </>
  );
};

export default MobileLogin;