this.state.xxx.map不是一個函數

Question

我正在嘗試顯示來自狀態的數據，但是當我嘗試映射數據時，會出現錯誤

this.state.xxx.map不是一個函數

import React, { Component } from 'react';
import axios from 'axios';

export default class Content extends Component {
    constructor(){
        super();
        this.state = {
            gifs: [{}]
        }
    }

    componentDidMount(){
        axios.get('https://api.giphy.com/v1/gifs/random?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G')
        .then( response => {
            this.setState({ gifs: response.data.data})
        })
        .catch(function(error){
          console.log(error);  
        })
    }

    render() {
        return (
            <div>
                {this.state.gifs.map( gif =>
                    <p>{gif.url}</p>
                    )}
            </div>
        );
    }
}

Answer 1

response.data.data是一個對象， map不是Object函數。

this.setState({ gifs: response.data.data})用傳入的對象替換gifs ，而不是將其添加到數組中。 您可以將response.data.data添加到狀態，如下所示：

componentDidMount(){
    axios.get('https://api.giphy.com/v1/gifs/random?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G')
    .then( response => {
        this.setState({ gifs: [...this.state.gifs, response.data.data] }); // This line is different
    })
    .catch(function(error){
        console.log(error);  
    })
}

Answer 2

來自https://api.giphy.com/v1/gifs/random?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G的response.data,data是一個對象。 您無法映射對象。

或者，如果要將對象添加到this.state.gifs ，則需要嘗試以下代碼：

this.setState(prevState => ({
  gifs: [...prevState.gifs, response.data.data]
}));

Answer 3

這是工作演示：

api會響應單個gif圖像並且它是對象，在你的狀態中，gifs是數組，所以你必須將新對象推入gifs數組，或者你可以使用spread operator'...' [...this.state.gifs,newGIFobject]添加gif數組。

 const {Component} = React; class Content extends Component { constructor(){ super(); this.state = { gifs:[] } } componentDidMount(){ axios('https://api.giphy.com/v1/gifs/random?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G') .then( response => { console.log(response); this.setState({ gifs: [...this.state.gifs, response.data.data]}) }) .catch(function(error){ console.log(error); }) } render() { return ( <div> {this.state.gifs.map(gif => <p>{gif.url}</p>)} </div> ); } } // Render it ReactDOM.render( <Content />, document.getElementById("react") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> <div id="react"></div>