React Native로 제출 한 후 useEffect에서 비동기 함수를 호출하는 방법은 무엇입니까?

Littchii

사용자가 전체 "페이지"를 다시로드하고 useEffect 함수를 호출하기 위해 제출 버튼을 클릭하면 싶습니다. 현재 동작은 사용자가 제출 버튼을 클릭 할 때 useEffect 함수가 전혀 호출되지 않는 것입니다. 제출 후 바로 다시로드되지 않는 것과 같습니다. 이것이 비동기로 인한 것인지 기다립니다. 나는 당신에게 코드를줍니다.

useEffect () :

useEffect(() => {

    console.log('test useEffect');

    (async () => {
      try {
        const value = await AsyncStorage.getItem('authToken_Lust');
        if(value !== null) {
          const decodedValue = jwt_decode(value);
          const current_time = Date.now() / 1000;
          if(decodedValue.exp < current_time) {
            setMessage('Vous n\'êtes plus connecté(e).')
          } else {
            setMessage('Vous êtes connecté(e)');
          }
        }
      } catch(err) {
        console.log(err);
      }
    })();

  }, []);

사용자가 제출을 클릭 한 후 호출되는 함수 코드 :

const onSubmit = async () => {
    setLoading(true)
    await fetch('http://192.168.1.36:3000/api/users/login', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email: email,
        password: password
      })
    })
    .then((response) => response.json())
    .then(async (res) => {
      if(res.error) {
        setMessage(res.error);
      } else {
        try {
          await AsyncStorage.setItem('authToken_Lust', res.token);
        } catch (err) {
          console.log(err);
        }
      }
    })
    .catch((err) => console.log(err))
    .finally(() => setLoading(false));
  }

탱크

k-wasilewski
  1. 자격 증명이 성공적으로 제출되었음을 나타내는 상태 변수를 만듭니다 (이 구성 요소 내에서).
const [submitted, setSubmitted] = useState(1);
  1. onSubmit의 API에서 응답을받을 때마다이 상태 변수를 변경하십시오 (구성 요소를 업데이트하기 위해).
try {
    await AsyncStorage.setItem('authToken_Lust', res.token);
    setSubmitted(submitted+1);
}
  1. useEffect에서 종속성 배열을 모두 제거하거나 submitted값 변경 에 응답하도록 변경하십시오.
useEffect(() => {
    // ...
}, [submitted]);

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

React-Native 앱에서 Firebase에 대한 비동기 호출을 처리하는 방법은 무엇입니까?

분류에서Dev

루프 내에서 비동기 함수 완료 후 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

SwiftUI에서 비동기 요청이 완료된 후 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

React의 여러 div에서 동일한 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

React에서 양식 제출을 기반으로 useEffect를 적용하는 방법은 무엇입니까?

분류에서Dev

React에서 버튼을 클릭 한 후 매번 두 번 호출되는 디스패치 함수를 수정하는 방법은 무엇입니까?

분류에서Dev

비동기 재귀 함수를 서로 호출하는 방법은 무엇입니까?

분류에서Dev

비동기 함수 내에서 React setState () 호출을 일괄 처리하는 방법은 무엇입니까?

분류에서Dev

서비스에서 배열이로드 된 후 함수를 호출하는 방법은 무엇입니까? 동시에 아님

분류에서Dev

React에서 setState에 대한 비동기 호출을 처리하는 방법은 무엇입니까?

분류에서Dev

비동기 데이터로드 후 HTML 양식을 제출하는 적절한 방법은 무엇입니까?

분류에서Dev

비동기 데이터로드 후 HTML 양식을 제출하는 적절한 방법은 무엇입니까?

분류에서Dev

React : 후속 setState () 호출에서 this.state를 사용하는 방법? this.state에 강제로 업데이트하는 방법은 무엇입니까?

분류에서Dev

React : 후속 setState () 호출에서 this.state를 사용하는 방법? this.state에 강제로 업데이트하는 방법은 무엇입니까?

분류에서Dev

useEffect에서 상태 설정이 완료된 후 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

썽크를 사용하여 react-redux 후크에서 비동기 호출을 만드는 방법은 무엇입니까?

분류에서Dev

제출 후 Angular에서 양식을 비동기 적으로 검증하는 방법은 무엇입니까?

분류에서Dev

useEffect 후크에 의해 호출되는 함수 호출을 중지하기 위해`onClick` 이벤트를 사용하는 방법은 무엇입니까?

분류에서Dev

날짜 선택기에서 날짜를 선택한 후 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

PHP에서 동일한 함수에서 다른 인수를 호출하는 방법은 무엇입니까?

분류에서Dev

Close ()를 호출 한 후 양식이 실제로 닫혔는지 확인하는 방법은 무엇입니까?

분류에서Dev

synchronus 함수에서 비동기 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

비동기 (대기) 메서드를 동 기적으로 호출하는 방법은 무엇입니까?

분류에서Dev

Angular-백엔드에 대한 비동기 호출 후 프로 시저를 호출하는 적절한 방법

분류에서Dev

C ++에서 정적 메서드를 비동기 적으로 호출하는 방법은 무엇입니까?

분류에서Dev

cout << 출력 콘솔에서 후행 구분 기호를 제거하는 방법은 무엇입니까?

분류에서Dev

다른 입력으로 Powershell에서 동일한 함수를 여러 번 호출하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

객체에서`valid?`메서드를 호출 한 후 오류를 수집하는 방법은 무엇입니까?

분류에서Dev

객체에서`valid?`메서드를 호출 한 후 오류를 수집하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    React-Native 앱에서 Firebase에 대한 비동기 호출을 처리하는 방법은 무엇입니까?

  2. 2

    루프 내에서 비동기 함수 완료 후 함수를 호출하는 방법은 무엇입니까?

  3. 3

    SwiftUI에서 비동기 요청이 완료된 후 함수를 호출하는 방법은 무엇입니까?

  4. 4

    React의 여러 div에서 동일한 함수를 호출하는 방법은 무엇입니까?

  5. 5

    React에서 양식 제출을 기반으로 useEffect를 적용하는 방법은 무엇입니까?

  6. 6

    React에서 버튼을 클릭 한 후 매번 두 번 호출되는 디스패치 함수를 수정하는 방법은 무엇입니까?

  7. 7

    비동기 재귀 함수를 서로 호출하는 방법은 무엇입니까?

  8. 8

    비동기 함수 내에서 React setState () 호출을 일괄 처리하는 방법은 무엇입니까?

  9. 9

    서비스에서 배열이로드 된 후 함수를 호출하는 방법은 무엇입니까? 동시에 아님

  10. 10

    React에서 setState에 대한 비동기 호출을 처리하는 방법은 무엇입니까?

  11. 11

    비동기 데이터로드 후 HTML 양식을 제출하는 적절한 방법은 무엇입니까?

  12. 12

    비동기 데이터로드 후 HTML 양식을 제출하는 적절한 방법은 무엇입니까?

  13. 13

    React : 후속 setState () 호출에서 this.state를 사용하는 방법? this.state에 강제로 업데이트하는 방법은 무엇입니까?

  14. 14

    React : 후속 setState () 호출에서 this.state를 사용하는 방법? this.state에 강제로 업데이트하는 방법은 무엇입니까?

  15. 15

    useEffect에서 상태 설정이 완료된 후 함수를 호출하는 방법은 무엇입니까?

  16. 16

    썽크를 사용하여 react-redux 후크에서 비동기 호출을 만드는 방법은 무엇입니까?

  17. 17

    제출 후 Angular에서 양식을 비동기 적으로 검증하는 방법은 무엇입니까?

  18. 18

    useEffect 후크에 의해 호출되는 함수 호출을 중지하기 위해`onClick` 이벤트를 사용하는 방법은 무엇입니까?

  19. 19

    날짜 선택기에서 날짜를 선택한 후 함수를 호출하는 방법은 무엇입니까?

  20. 20

    PHP에서 동일한 함수에서 다른 인수를 호출하는 방법은 무엇입니까?

  21. 21

    Close ()를 호출 한 후 양식이 실제로 닫혔는지 확인하는 방법은 무엇입니까?

  22. 22

    synchronus 함수에서 비동기 함수를 호출하는 방법은 무엇입니까?

  23. 23

    비동기 (대기) 메서드를 동 기적으로 호출하는 방법은 무엇입니까?

  24. 24

    Angular-백엔드에 대한 비동기 호출 후 프로 시저를 호출하는 적절한 방법

  25. 25

    C ++에서 정적 메서드를 비동기 적으로 호출하는 방법은 무엇입니까?

  26. 26

    cout << 출력 콘솔에서 후행 구분 기호를 제거하는 방법은 무엇입니까?

  27. 27

    다른 입력으로 Powershell에서 동일한 함수를 여러 번 호출하는 가장 좋은 방법은 무엇입니까?

  28. 28

    객체에서`valid?`메서드를 호출 한 후 오류를 수집하는 방법은 무엇입니까?

  29. 29

    객체에서`valid?`메서드를 호출 한 후 오류를 수집하는 방법은 무엇입니까?

뜨겁다태그

보관