useEffect에 비동기 함수를 추가한 후 오류가 발생함

useEffect에 비동기 함수를 추가한 후 오류가 발생함

useEffect 함수는 getResults 함수 변수만 언급해도 앱이 크래쉬하지 않습니다.그러나 아래 코드에서와 같이 호출하면 다음과 같은 오류가 발생합니다.

react-dom.development.js:21857 Uncaught TypeError: 파괴는 함수가 아닙니다.

그리고.

오류 처리 동작을 사용자 정의하려면 오류 경계를 트리에 추가하는 것이 좋습니다.

  function App() {
  const [foods, setFoods] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => getResponse());
  const getResponse = async () => {
    const response = await fetch(sampleRequest);
    const data = await response.json();
    setFoods(data.hits);
  };
  let query = "Tomato";
  let sampleRequest = `https://api.edamam.com/search?q=${query}&app_id=${"1811484f"}&app_key=${"9cac93361efc99e2ebfbb8a453882af8"}`;

  return (
    <div className="App">
      <div className="main">
        <div className="navbars">
          {" "}
          <Navbars></Navbars>
        </div>
        <div className="listings">
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
        </div>
        <div className="footer">
          <h5>Made By YoYo Strangler in 2019</h5>
        </div>
      </div>
    </div>
  );
}

export default App;

전화한 결과를 돌려드립니다.getResponse()에서useEffect기능.만약 당신이 반품한다면useEffect함수여야 합니다.코드를 이 코드로 변경하면 수정될 것입니다.이것은, 로부터 아무것도 반환하지 않기 때문입니다.useEffect기능.

useEffect(() => { 
  getResponse();
});

---

그useEffect청소 기능

에서 반환된 것이 있으면useEffect후크 함수, 청소 함수여야 합니다.이 함수는 구성 요소가 마운트 해제될 때 실행됩니다.이것은, 대략, 에 상당하는 것으로 생각할 수 있습니다.componentWillUnmount클래스 컴포넌트의 라이프 사이클 메서드.

useEffect(() => { 
  doSomething();

  return () => {
    console.log("This will be logged on unmount");
  }
});

비동기 함수는 약속의 구문설탕일 뿐이므로 비동기 함수를 호출하면 약속이 반환됩니다.

대신 비동기 함수를 IIFE(Imediate-Invirced Function Expression)로 랩할 수 있기 때문에 아무것도 반환되지 않습니다.useEffect청소 기능으로 사용됩니다.

useEffect(() => { 
  (async () => getResponse())();
});

편집: 또는 @json이 아래의 코멘트에서 지적한 바와 같이.그냥:

useEffect(() => { getResponse() });

IIFE를 이렇게 썼는데 효과가 있었어!!-

아까는 이랬는데...

useEffect(async ()=>{
    const awesome_value = await AsyncStorage.getItem('awesome')
    setAwesome(awesome_value)
},[]);

이제 이렇게 바꿨어요.

useEffect( ()=>{
   (async() => {const awesome_value = await AsyncStorage.getItem('awesome')
   setAwesome(awesome_value)} ) ();
},[]);

위의 간단한 코드가 당신의 앱에 크래쉬하는 이유는 어떻게 하면useEffect후크,async함수 및 단축 화살표 함수 구문이 작동합니다.

useEffect 후크의 기능 중 하나는 청소 기능입니다.useEffect 후크함수에서 반환되는 것은 정리함수여야 합니다.이 함수는 구성 요소가 마운트 해제될 때 실행됩니다.이는 클래스 컴포넌트의 componentWillUnmount 라이프 사이클 메서드와 거의 동등하다고 생각할 수 있습니다.

JavaScript에서 함수는 다음과 같이 표시됩니다.async키워드를 지정하면,awaitfeature: 개발자가 비동기 작업이 완료되기를 기다리는 동안 함수의 실행을 일시 중지할 수 있습니다.또한 비동기 함수는 항상 Promise를 반환합니다. 함수가 Promise를 아직 반환하지 않은 경우 반환 값은 자동으로 Promise로 래핑됩니다.

마지막으로, 속기 화살표 함수 구문을 사용하면 개발자는 함수 본문 주위에 있는 물결 괄호를 생략할 수 있으며, 이는 단순한 한 줄에 유용합니다.은 자동으로 함수의 , 이 값은 함수의 .return키워드를 지정합니다.암묵적 반환

어떻게 이 작은 조각들이 합쳐져서 이런 알 수 없는 오류를 일으킬 수 있을까요? 말하면, 단히 of 의 가치는,getResponse약속( useEffect) useEffect를 사용합니다.될 것으로 예상합니다.useEffect는 청소 기능이 반환되는 것을 합니다..그래서 리액션은 비틀거리면서 오류를 발생시킵니다.

앱을 수정하려면 다음과 같이 useEffect 화살표 기능을 변경하여 물결 괄호를 추가하고 Implicit Return을 제거합니다.

useEffect(() => { 
  getResponse();
});

는 useEffect를 반환합니다.undefined이는 허용되며 React에게 청소 기능이 필요하지 않음을 알려줍니다.이렇게 하면 문제가 해결되지만, 이 경우 React에서 더 유용한 오류 메시지를 보내주시면 감사하겠습니다!

바보같습니다만, 저는 useEffect로부터 응답을 받았기 때문에, 이 에러가 발생했습니다.반품도 하고 있는지 확인해 주세요.

언급URL : https://stackoverflow.com/questions/58495238/getting-error-after-i-put-async-function-in-useeffect