componentDidMount에서 ajax 호출의 상태 값 렌더링 시도가 실패 함 (React)

Question

React with Axios에서 AJAX 호출을 만들었으며 응답 처리 방법에 대해 약간 혼란 스럽습니다. 나는 결과를 CONSOLE.LOG 때

componentDidMount() { 
    axios.get('https://jsonplaceholder.typicode.com/users') 
     .then(res => { 
     const users = res.data 
     this.setState({ users }); 
     }); 
} 

render() { 
    console.log(this.state.users) 
    return (
    <div> 
     {this.state.users.map(user => <p>{user.name}</p>)} 
    </div> 
    ) 
} 

, 두 값이 반환됩니다 : 여기

내 코드입니다

1. [] - 초기 상태에 할당 된 빈 배열
2. 예상 API에서 배열.

이것은 아마도 초기화시 한 번 리턴 된 상태 값과 componentDidMount가 다시 리턴 된 상태 값으로 설명 할 수 있습니다.

this.state.users 값에 액세스하는 방법에 문제가 발생합니다. 물론 나는이 액세스 언제든지, 나는 AJAX 응답에서 반환 된 값을 원하지만, 예를 들어 내가 ...

{this.state.users[0].name}

배열의 첫 번째 개체에서 name 속성을 렌더링하려고하면 .. .it는 []에 액세스하려고 시도하므로 아무 것도 반환하지 않습니다.

그러나, 나는 예상대로

{users.map(user => <p>user.name</p>)}

는 ... 그것은 값을 반환 ... 배열의 요소를 반복하려고합니다.

이유는 두 번째 예에서는 작동하지만 첫 번째 예에서는 작동하지 않습니다. 첫 번째가 초기 상태 값 (빈 배열)에서 데이터를 가져 오려고 시도하는 경우 을에서 this.state.users까지 매핑하면 빈 배열을 통해 매핑하고 아무 것도 반환하지 않거나 오류가 발생합니다.

여기에서는 React 렌더링 프로세스를 완전히 이해하지 못했고 componentDidMount가 구성 요소 수명주기에서 어떻게 작동하는지 분명히 알지 못합니다. 응답 값을 상태에 직접 할당하려고 잘못 했습니까?

누구든지이 문제를 해결할 수 있으면 감사하겠습니다.

Answer 1

map()을 this.state.users에 처음 사용하면 빈 배열 (아무 것도 렌더링하지 않음)을 통해 수행됩니다. 응답이 도착하고 this.setState({ users })이 호출되면 render()이 다시 실행됩니다. 이번에는 사용자 배열이 더 이상 비어 있지 않으며 배열의 각 사용자에 대해 map() 작업이 수행됩니다.

그러나 처음에는 빈 배열에서 {this.state.users[0].name}을 사용하면 아직 존재하지 않는 개체의 name 속성에 액세스하려고 시도하는 중 오류가 발생합니다. 오류를 방지하려면 개체의 속성에 액세스하기 전에 검사를 수행하십시오.

{this.state.users.length > 0 && this.state.users[0].name} 

이제 첫 번째 예제와 같은 방식으로 동작합니다. 나는. 첫 번째 render()은 실제로는 아무 것도하지 않습니다. this.state.users.length = 0입니다.그러나 새 사용자와 함께 this.setState()이 호출되면 render()이 다시 실행되며 이번에는 this.state.users[0].name을 사용할 수 있습니다.

Answer 2

다른 방법으로 생성자가 있습니다. 빈 배열 사용자로 상태를 추가하십시오.

constructor(props) { 
     super(props); 
     this.state = { 
     users: [] 
     }; 
    } 

빈 사용자 배열로 처음 렌더링 된이 구성 요소를 사용하십시오. 상태 업데이트를 트리거하면 구성 요소가 새 배열로 다시 렌더링됩니다.