TypeError: Cannot read property 'map' of undefined

1.

import React, {Component} from 'react';

import {fromJS} from "immutable";
import {fetchUsers} from "./api";

export default class UsersContainer extends Component {
    state = {
        data: fromJS({
            users: null,
        })
    }
    get data() {
        return this.state.data;
    }

    set data(data) {
        this.setState({data})
    }
    componentDidMount() {
        fetchUsers().then(users => {
            this.data = this.data.set('users', fromJS(
                users
            ))
        })
    }
    render() {

        const users = this.data.toJS().users;
        return (
                <ul>
                    {users.map( (v,i) => <li><a key={i} href={`/users/${i}`}>{v.first}</a></li> )}
                </ul>
        )
    }
}

이 코드를 컴파일 하면, 

이러한 오류가 발생한다. 

 

이 코드에서는 users 이라는 state를 null로 초기화 해주고, componentDidMount() 에서 배열을 fetch 한다. 그렇지만 componentDidMount()는 컴포넌트가 마운트 된 후 실행되기 때문에, componentDidMount()가 실행되기 전 users state는 배열이 아니기 때문에(null) map이라는 property 가 없다고 뜨는 것이다. 

 

이를 해결하기 위해서는 아래와 같이 state를 작성하여야 한다.

 

state = {
    data: fromJS({
        users: [],
    })
}