Promise결과를 받아서 useMemo에 저장후 사용하려 하면 에러남, useState로 저장후에 useEffect로 감지하려고 해도 에러남

에러: Promise로 받은 state의 변화를 감지하려고 하여 useEffect사용했으나, Promise결과가 반환되기 전에 useEffect가 한번만 call되고 결과값이 나온후에 다시 call되지 않음

 

 const getDivisionList = async () => {

    try {return await request(getDivisions);}

    catch (error) {console.error(error);}

  };

 

 useEffect(() => {

    const init = async () => {

      const [divisions] = await Promise.all([getDivisionList()]);

     

      setDivisionOptionsValue(divisions.map(n=>({value:n.companyCode, label:n.companyCode, group:"sortType"})));

    };

    init();

  }, []);

 useEffect(() => {setDivisionOptions(setDivisionOptionsValue)}, [divisionOptionsValue]);

 ........

 divisionOptions[0].... -> 에러남

 

에러: promise결과값을 useMemo로 저장시 끝까지 promise상태고 남아 있어 에러남

  const divisionOptionsValue = React.useMemo(()=>{

    const init = async () => {

      const [divisions] = await Promise.all([getDivisionList()]);

      setDivisionOptions(divisions.map(n=>({value:n.companyCode, label:n.companyCode, group:"sortType"})));

      return (divisions.map(n=>({value:n.companyCode, label:n.companyCode, group:"sortType"})));

    };

    return init();

  },[])

 .......

 setDivisionOptions(setDivisionOptionsValue) -> setDivisionOptionsValue는 계속 Promise상태

 divisionOptions[0].... -> 에러남

 

정상

  useEffect(() => {

    const init = async () => {

      const [divisions] = await Promise.all([getDivisionList()]);

      setDivisionOptions(divisions.map(n=>({value:n.companyCode, label:n.companyCode, group:"sortType"})));

      setDivisionOptionsValue(divisions.map(n=>({value:n.companyCode, label:n.companyCode, group:"sortType"})));

    };

    init();

  }, []);

 

 .......

 setDivisionOptions(setDivisionOptionsValue)

divisionOptions[0].... -> 정상동작