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

Posted 2023-02-22

【中文标题】在 Javascript/Reactjs 中使用 Fetch API 和 map() 显示 JSON 数据

【英文标题】：Displaying JSON data using Fetch API and map() in Javascript/Reactjs

【发布时间】：2017-04-16 13:09:21

【问题描述】：

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

有没有一种方法可以访问（或单独列出）API 中的第二个对象？然后我可以在上面运行 map() 。请参阅下面的代码。这当前返回错误：this.state.jokes.map is not a function

附：该代码在包装在数组中的 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>
        );
    

【参考方案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 键的值，因为那是您以后要使用的。

【参考方案2】：

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>
        );