javascript - 在Javascript/Reactjs中使用Fetch API和map()显示JSON数据

我一直在尝试从API提取json数据并使用map()函数显示它。不幸的是，API以以下格式返回数据:{“type”:...，“value”:...}。第二个对象值包含一个包含我要访问的数据的数组。

有没有一种方法可以访问(或单挑)API中的第二个对象？然后我可以在上面运行map()。请参见下面的代码。当前这将返回错误: this.state.jokes.map不是函数

附言代码可以完美地在包装在数组中的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>
        );
    }
}

最佳答案

尝试使用

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键的值，因为这是您以后使用的值。