Javascript/ReactjsでFetch APIとmap（）を使用してJSONデータを表示

Question

APIからjsonデータを取得し、map（）関数を使用して表示しようとしています。残念ながら、APIは{"type"：...、 "value"：...}の形式でデータを返します。 2番目のオブジェクトの値には、アクセスしたいデータの配列が含まれています。

API内の2番目のオブジェクトにアクセスできる（または単一の）方法がありますか？それからmap（）を実行することができます。以下のコードを参照してください。これは現在、エラー：を返します。this.state.jokes.mapは関数ではありません。

P.S.このコードは、配列でラップされたAPI上でうまく動作します。 http://jsonplaceholder.typicode.com/posts

class JokeList extends React.Component { 

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

    } 

    componentDidMount() { 
     fetch(`http://api.icndb.com/jokes`) 
      .then(result => result.json()) 
      .then(jokes => this.setState({jokes})) 
    } 

    render() { 

     return (
      <div> 
       {this.state.jokes.map(joke => 
         <div key={joke.id}> {joke.joke} </div>)} 
      </div> 
     ); 
    } 
} 

Answer 1

代わり

fetch(`http://api.icndb.com/jokes`) 
    .then(result => result.json()) 
    .then(jokes => this.setState({jokes: jokes.value})) 

を使用してみてください。それはあなたが後に使用しているものだから

{ 
    "type": "...", 
    "value": [the value you want], 
} 

あなたは、valueキーの値をしたい：APIからの応答は、このようなものですので、

です。