React 애플리케이션에 오류 메시지를 표시하는 방법

API 호출이 오류를 반환할 수 있습니다. 오류 처리 방법을 배우십시오.

React에서는 항상 외부 API를 사용해야 합니다.우리는 보통 원격 서버에서 데이터를 가져와 응용 프로그램에 표시합니다.
우리는 원격 서버에 http 요청을 보내는 매우 유행하는 라이브러리가 Axios라는 것을 보았다.Axios에서는 API에서 데이터를 가져오고 발표하고 업데이트하고 삭제하는 데 사용되는 get(), post() 등의 방법을 사용할 수 있습니다.
우리는 Axios 호출을 클래스 구성 요소의 http 함수에 두기를 희망합니다.componentDidMount() 구성 요소가 프로그램을 불러올 때 React에서 자동으로 호출합니다.Axios에 대한 호출을 배치하면 적절한 시점에 호출되고 읽어들인 데이터는 구성 요소 상태에 사용할 수 있으며 표시를 준비합니다.

가능한 API 오류

그러나 외부 API 호출이 모두 성공한 것은 아닙니다.사실상 원격 서버가 꺼졌거나 다른 장애가 우리가 찾고 있는 데이터의 접근을 막았을 가능성이 높다.
이 경우 Axios에서 오류가 반환됩니다.일반적인 경우, 어떤 알림 (예를 들어 웹 페이지에 오류 메시지 표시) 을 터치해서 사용자에게 오류가 발생했음을 알립니다.

오류 메시지를 어떻게 표시합니까?

만약 우리가 오류가 발생했을 때 보기 맨 위에 오류 메시지를 표시하기를 원한다면.메시지를 표시하기 위해서 구성 요소 componentDidMount() 에서 메시지를 준비해야 합니다.
state 대상에 state 속성을 추가합니다. 그 값은 빈 문자열로 초기 상태입니다.

state = {
  items: [],
  errorMessage: ''
}

Axios 호출을 errorMessage에 넣고 호출이 성공하면 API 응답에서 반환되는 값으로 설정합니다.

componentDidMount() {
  axios.get('http://localhost:3333/items')
    .then(response => this.setState({items: response.data}))
    .catch(err => { console.log(err) })
}

단, 오류가 발생하면 데이터componentDidMount()에서 사용할 수 없으며 state 방법을 호출합니다.API에서 반환된 오류 객체가 전달됩니다.
이 때, 우리가 해야 할 일은 오류를 가져오고 then() 업데이트 상태의 catch() 속성을 사용하는 것입니다.
다음 코드에서 나는 이 조작을 보여 주었다.catch 지점에서, 나는 대상 호출 errorMessage 을 사용하는데, 이 대상은 API가 되돌아오는 오류 업데이트 setState() 를 사용합니다.

componentDidMount() {
  axios.get('http://localhost:3333/items')
    .then(response => this.setState({items: response.data}))
    .catch(err => { 
      this.setState({errorMessage: err.message});
    })
}

지금 우리가 컨디션에 착오가 생겼다. 우리가 해야 할 일은
우리 홈페이지의 꼭대기.우리 어떻게 해야 돼요?

오류 표시

이 점을 해낼 수 있는 많은 방법이 있지만, 우리는 조건문을 만드는 것을 좋아한다
오류를 표시합니다.조건문은 기본적으로 다음과 같이 말해야 한다.
"상태에 오류 메시지가 있으면 setState() 값이 있는 errorMessage 요소가 표시됩니다. 그러나 h3가 비어 있으면 아무 것도 표시되지 않습니다."
이if조건을 코드로 바꾸기 위해서 우리는 간단한olderrorMessage문장을 사용할 수 있지만, 우리는 기이한 방법을 사용할 수 있다.
우리는 단축 연산자errorMessage를 사용한다.if 연산자는 문장의 중간에 있다.

문장의 왼쪽을 먼저 계산한다.

왼쪽이 true이면 문장의 오른쪽을 실행합니다.

왼쪽이 올바르지 않으면 && 오른쪽에 아무런 작업도 수행되지 않습니다.

다음 코드에서는 상태의 && 속성이 비어 있지 않은 경우에만 && 연산자를 사용하여 오류 메시지를 표시합니다.

{ this.state.errorMessage &&
  <h3 className="error"> { this.state.errorMessage } </h3> }

이는 &&가 errorMessage인 경우 오류 메시지가 표시됩니다.
이 문장을 괄호에 묶어야 한다는 것을 기억하십시오. this.state.errorMessage 에서 자바스크립트 코드를 작성하고 있기 때문입니다.

요컨대

외부 자원에 대한 API 호출이 끊기고 예상한 데이터가 아닌 오류가 반환될 수 있습니다.

이 예에서 오류를 포착하여 응용 프로그램에 표시하면 사용자가 문제를 알게 됩니다.

우리는 조건문을 사용하여 오류를 표시합니다. 이 문장은 오류가 존재할 때만 오류를 표시합니다.

보시다시피, 코드를 작성하면 React 프로그램에서 오류 메시지를 표시하기가 매우 쉽습니다.
나는 매일 인터넷 개발에 관한 글을 쓴다.만약 당신이 이 글을 좋아한다면, 당신의 친구와 동료와 공유하는 것을 환영합니다.
subscribing to my newsletter 받은 편지함에서 비슷한 글을 받을 수 있습니다.