使用Fetch API和JavaScript中的映射（）显示JSON数据/ Reactjs

Question

我一直在尝试从API中获取JSON数据并使用map（）函数显示它。不幸的是，API返回的数据格式为：{“type”：...，“value”：...}。第二个对象值包含一个包含我想要访问的数据的数组。

有没有一种方法可以访问（或单出）只是API中的第二个对象？然后我可以在其上运行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})) 

代替。

这是因为来自API的响应是这样的：

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

您希望value键的值，因为这是你以后使用的是什么。