React에서 UseEffect() 내의 비동기 함수를 호출하려면 어떻게 해야 합니까?

React에서 UseEffect() 내의 비동기 함수를 호출하려면 어떻게 해야 합니까?

비동기 함수를 호출하여 UseEffect 결과를 얻고 싶습니다.

인터넷에서 찾은 fetch api 예는 useEffect 함수로 직접 작성되었습니다.URL이 변경되면 모든 가져오기 항목에 패치를 적용해야 합니다.

내가 시도했을 때, 나는 오류 메시지를 받았다.

이건 내 암호야

    async function getData(userId) {
        const data = await axios.get(`http://url/api/data/${userId}`)
            .then(promise => {
                return promise.data;
            })
            .catch(e => {
                console.error(e);
            })
            return data;
    }


    function blabla() {
        const [data, setData] = useState(null);

        useEffect(async () => {
            setData(getData(1))
        }, []);

        return (
            <div>
                this is the {data["name"]}
            </div>
        );
    }

index.js:1375 경고:이펙트 함수는 청소에 사용되는 함수 외에 다른 어떤 것도 반환해서는 안 됩니다.useEffect(async () => ...)를 쓰거나 Promise를 반환한 것 같습니다.대신 효과 내에 비동기 함수를 적어 즉시 호출합니다.

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

이펙트 내에 비동기 함수를 생성하여getData(1)result then call(결과 후 콜)setData():

useEffect(() => {
  const fetchData = async () => {
     const data = await getData(1);
     setData(data);
  }

  fetchData();
}, []);

바로 호출하는 경우 익명 함수로 사용할 수 있습니다.

useEffect(() => {

  (async () => {
     const data = await getData(1);
     setData(data);
  })();

}, []);

경고에 따라 이펙트 내에서 비동기 함수를 호출하는 것이 가장 좋습니다.

    function blabla() {
        const [data, setData] = useState(null);

        useEffect(() => {
            axios.get(`http://url/api/data/1`)
             .then(result => {
                setData(result.data);
             })
             .catch(console.error)
        }, []);

        return (
            <div>
                this is the {data["name"]}
            </div>
        );
    }

컴포넌트 외부에 api 함수를 유지하려면 다음 작업을 수행할 수도 있습니다.

    async function getData(userId) {
        const data = await axios.get(`http://url/api/data/${userId}`)
            .then(promise => {
                return promise.data;
            })
            .catch(e => {
                console.error(e);
            })
            return data;
    }


    function blabla() {
        const [data, setData] = useState(null);

        useEffect(() => {
            (async () => {
                const newData = await getData(1);
                setData(newData);
            })();
        }, []);

        return (
            <div>
                this is the {data["name"]}
            </div>
        );
    }

부터getData사용할 수 있는 Promise를 반환합니다..then

useEffect(() => {
    getData(1).then(setData);
}, []);

구성 요소를 마운트 해제하거나 다른 구성 요소를 사용하여 다시 렌더링할 수 있음someId대기 시간이 해결되기 전에:

const unmountedRef = useRef(false);
useEffect(()=>()=>(unmountedRef.current = true), []);

useEffect(() => {
  const effectStale = false; // Don't forget ; on the line before self-invoking functions
  (async function() {
    // You can await here
    const response = await MyAPI.getData(someId);

    /* Component has been unmounted. Stop to avoid
       "Warning: Can't perform a React state update on an unmounted component." */
    if(unmountedRef.current) return;

    /* Component has re-rendered with different someId value
       Stop to avoid updating state with stale response */
    if(effectStale) return;

    // ... update component state
  })();
  return ()=>(effectStale = true);
}, [someId]);

컴포넌트를 마운트하기 전에 로드해야 하는 데이터에 서스펜스를 사용하는 것을 고려해 주십시오.

훅 외부에서 비동기 함수를 정의하고 훅 내에서 호출할 수 있습니다.

const fetchData = async () => {
   const data = await getData(1);
   setData(data);
}

useEffect(() => {
  fetchData();
}, []);

언급URL : https://stackoverflow.com/questions/56838392/how-to-call-an-async-function-inside-a-useeffect-in-react