フェッチAPIを使用してデータを取得しない

debugcn 投稿 Dev

灰

私はオープンソースのApiリンクを使用しており、Reactで使用しています。ブラウザでデータを取得できません。私は何が間違っているのですか？ここでは、国名と市外局番を取得しようとしています。

export default class Api extends Component{
    constructor(props){
        super(props);

        this.state ={
            country:[]
        };
    }
    componentDidMount(){
        fetch("https://restcountries.eu/rest/v2/all")
        .then(res=>res.json())
        .then(
            result=>{
                console.log(result);
                console.warn(result);
                // this.setState({country:result});
                console.log("i am in console");
            }
        )
    }
    render (){
        return (
            <div>
            <h1 className="text-center"> Api</h1>
            <h2> country details</h2>
            <div>{this.state.country.map(countries => { 
               <div key={countries.name}>
                   {/* <div {countries.name}></div> */}
                   <div>{countries.alpha3Code}</div>
                   <div>{countries.callingCodes}</div>
               </div>
                }
                )}</div>
            </div>
        );
    
}
}

codemonkey

次のように、そのマップ関数から何かを返す必要があります。

           <div>{this.state.country.map(countries =>  
               <div key={countries.name}>
                   <div> {countries.name}></div>
                   <div>{countries.alpha3Code}</div>
                   <div>{countries.callingCodes}</div>
               </div>                
                )}</div>
            </div>

ステートメントの代わりとなる{inがないことに注意countries => してreturnください。

それとは別に、状態設定行のコメントを外すだけで、準備は完了// this.setState({country:result});です。

念のため、ここにサンドボックスがあります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]