React - TypeError: jokes.map is not a function

Question

我对 React 比较陌生，我正在尝试构建一个简单的应用程序来查询 Chuck Norris API 和 returns 一个随机笑话。当我在浏览器中运行我的代码时，我收到以下错误消息：

TypeError: jokes.map is not a function

我的理论是 'map' 需要一个数组 - 我的 json 数据对象不是 - 但是我不确定并且不确定我的代码是什么/如何调整，即使是案例.

这是我的代码：

这是App.js:

import React, {Component} from 'react';
import Norris from './components/norris';


class App extends Component {
 render() {
    return (
        <Norris jokes={this.state.jokes} />
    )
 }

 state = {
    jokes: []
 };

 componentDidMount() {
    fetch('https://api.chucknorris.io/jokes/random')
        .then(res => res.json())
        .then((data) => {
            this.setState({ jokes: data})
        })
        .catch(console.log)
}

}

export default App;

这里是norris.js:

import React from 'react'

const Norris = ({jokes}) => {
 return (
    <div>
        <center><h1>Norris Jokes</h1></center>
        {jokes.map((joke) => (
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{joke.value}</h5>
                </div>
            </div>
        ))}
    </div>
 )
};

export default Norris

Answer 1

我检查了你 API 端点 https://api.chucknorris.io/jokes/random 它根本 return 任何数组，对象中也没有任何 data 变量 returns.

输出是一个具有某些属性的对象：

fetch('https://api.chucknorris.io/jokes/random')
        .then(res => res.json())
        .then((data) => {
           console.log(data);
        })
        .catch(console.log)

Answer 2

https://api.chucknorris.io/jokes/random 的响应不是数组

如果你想把笑话作为一个数组，你可以像下面这样更改你的代码：

componentDidMount() {
    fetch('https://api.chucknorris.io/jokes/random')
        .then(res => res.json())
        .then((data) => {
            this.setState({ jokes: [data]})
        })
        .catch(console.log)
}

Answer 3

好吧，端点不提供数组，而是一个笑话，用 JSON 包裹起来，像这样：

{
categories: [ ],
created_at: "2020-01-05 13:42:20.841843",
icon_url: "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
id: "cFdQaTXXRJS_tIKa_xuqOg",
updated_at: "2020-01-05 13:42:20.841843",
url: "https://api.chucknorris.io/jokes/cFdQaTXXRJS_tIKa_xuqOg",
value: "Chuck Norris can ride a BMX bike while wearing bigass MC Hammer parachute pants."
}

（有点蹩脚，这个）。因此，首先，将道具重命名为 joke，而不是 jokes.map(//...，其次，只保留

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{joke.value}</h5>
                </div>
            </div>

Answer 4

您调用的 API 只是 ONE 个随机笑话，而不是笑话列表（对象数组）。

You can check this code sandbox with a working code.

Or here if you want a list with multiple jokes.

干杯！

App.js

import React, { useEffect, useState } from "react";    
import Norris from "./Norris";
    
    export default function App() {
      const [state, setState] = useState([]);
    
      useEffect(() => {
        for (let i = 0; i < 5; i++) {
          fetch("https://api.chucknorris.io/jokes/random")
            .then((result) => result.json())
            .then((data) => setState((s) => [...s, data.value]))
            .catch((error) => console.log(error));
        }
      }, []);
    
      return (
        <div style={{ fontFamily: "sans-serif" }}>
          <Norris jokes={state} />
        </div>
      );
    }

Norris.js

import React from "react";

export default function Norris({ jokes }) {

      return (
        <>
          <h1>Norris Jokes</h1>
          <ul>
            {jokes.map((joke, index) => (
              <li key={index}>{joke}</li>
            ))}
          </ul>
        </>
      );
    }

React - TypeError: jokes.map is not a function

React - TypeError: jokes.map is not a function

javascript

reactjs

api-design