React - TypeError：jokes.map 不是函数

Posted 2023-02-19

【中文标题】React - TypeError：jokes.map 不是函数

【英文标题】：React - TypeError: jokes.map is not a function

【发布时间】：2021-04-25 07:26:05

【问题描述】：

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

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

【问题讨论】：

试试jokes && jokes.map(joke=>(YOUR_REMAINING_CODE)) 。这仅适用于您的jokes 是一个数组。

在将数据设置为状态之前检查数据是什么。它可能不是一个数组。

笑话是异步填充的，因此在初始渲染时它将是未定义的。当响应返回时，它将有数据。这可以通过首先检查笑话不是未定义来解决。

@JacobSmit 它的初始值是一个数组。

【参考方案1】：

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)

【讨论】：

去想法，他必须在映射之前添加检查值，笑话 && jocks.map

【参考方案2】：

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

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

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

【参考方案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."

（有点蹩脚，这个）。 所以不要jokes.map(//...，首先，将prop重命名为joke，其次，只保留

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

【参考方案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>
        </>
      );