Получение «TypeError: this.state.data.map не является функцией», когда я пытаюсь получить API и получить данные из ответа JSON

Question

Я новичок, чтобы реагировать, и когда я пытаюсь получить данные из API, я получаю сообщение об ошибке «Ошибка типа: this.state.data.map не является функцией». Я просто следую инструкциям на YouTube, но почему я не могу получить результат? Любой из вас, пожалуйста, помогите мне решить эту проблему. Рассмотрим код ниже:

Ответ JSON от API должен быть таким:

constructor(props){
  super(props);
  this.state ={
    loginEmail: this.props.location.state.loginEmail,
    data: [],
    user_info: [],
    isLoaded: false,
    redirect: false
  }
  this.logout = this.logout.bind(this);
}

componentDidMount(){
 //  console.log(this.state.loginEmail)
  fetch(`https://ems-unimas-58134.herokuapp.com/api/users/view/${this.props.location.state.loginEmail}`)
  .then((resp)=>{
    resp.json().then((res)=>{
      //console.log(res.data.user_info);
      this.setState({data: res.data.user_info})
;    })
  })
}

  render(){

    if(this.state.redirect){
      return (<Redirect to ={'/login'}/>)
    }
    //const data=this.state.data;
    //console.warn(data);
const data = this.state.data;    
//console.log("data: ", data)
    return (      
        <div>
            {
              this.state.data?
              this.state.data.map((item)=>
              <h3>{item.name}</h3>
              )
              :
              <h3>wait...data is fetching</h3>

            }
        </div>
    );
  }
}