Typeerror：无法读取属性＆＃39; map＆＃39;未定义的

Question

我得到＆＃34;无法阅读财产＆＃39; map＆＃39;未定义＆＃34;尝试在获取后显示api的结果时出错。我搜索了这个错误，发现这可能是由于地图被调用具有空值的状态引起的，为了避免这种情况我在构造函数中声明时初始化我的状态，仍然显示此错误..，这是我的代码

import React, { Component } from 'react';
import './App.css';

function Show(props){
 return(
   <ul>
    {
      props.list.map((name,i) => (
      <li key = {i}>{name.pokemon.name}</li>
       )
      )
    }
  </ul>
 );
 }


class App extends Component {

constructor(props){
super(props)
this.state = {
list_pok: [
{pokemon: {name: "vaibhav" }
},
{pokemon: {name: "vinayak" }
},
{pokemon: {name: "manju" }
}
],
option_selected: "1"
}
this.selected = this.selected.bind(this)
this.listing = this.listing.bind(this)
}

componentDidMount(){
 }
 selected(e){
 e.preventDefault();
  this.setState({
  option_selected: e.target.value,
  })

  fetch("https://pokeapi.co/api/v2/type/2/")
 .then((res)=> res.json())
 .then((data)=>{

  this.setState(
      {list_pok: data.pokemon}
  )
  })
}

render() {

return (
  <div className = "App">
   <h1>The Pokemon Fan club</h1>
   <form>
     <label>Pokemon Type : </label>
       <select onChange = {this.selected}>
         <option value = '1'>Default</option>
         <option value = '2'>Normal</option>
         <option value = '3'>Air</option>
         <option value = '4'>Water</option>

       </select>
       {console.log(this.state.option_selected)}
       {console.log(this.state.list_pok)}
    </form>

      <Show list = {this.list_pok} />

  </div>
  );
  }

  }

 export default App;