从 this.setState() 索引数据时出错

Question

我正在使用 GIPHY API 创建一个 GIF 搜索网络应用程序并作出反应。

从 API 中获取数据后，我可以索引数据 console.log(json.data[0])

.then((json) => {
      console.log(json.data[0]);
      this.setState({ myGif: json });
});

但是当我将我的状态设置为 JSON 文件并尝试索引数据时 console.log(this.state.myGif.data[0]) 我得到一个错误

TypeError: Cannot read property “0” from undefined

    render() {
        console.log(this.state.myGif.data[0]);
        return (
            <div>
                <h1>This is </h1>
            </div>
        );
    }

如果能得到回复，我将不胜感激

下面是组件的完整代码

import React, { Component } from 'react';

export class Content extends Component {
    constructor(props) {
        super(props);

        this.state = {
            myGif: {},
        };
    }

    componentDidMount() {
        const api_key = 'rYJ5AxF8DXFqeX8ub81fbuje3J12lrh6';
        fetch(
            `http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=${api_key}&limit=3`
        )
            .then((response) => response.json())
            .then((json) => {
                console.log(json.data[0]);
                this.setState({ myGif: json });     
            });
    }

    render() {
        console.log(this.state.myGif.data[0]);
        return (
            <div>
                <h1>This is </h1>
            </div>
        );
    }
}

export default Content;

Answer 1

尝试 console.log 数据，如：

console.log(
      this.state.myGif.data
        ? this.state.myGif.data[0]
        : "data is not downloaded yet"
    );

Answer 2

您的 fetch 和 setState 调用都是异步的。当它正在获取时，您的 render 将被调用。

解决此问题的一种方法是检查当前状态，例如

 render() {
        this.state.myGif && console.log(this.state.myGif.data[0]);
        return (
            <div>
                <h1>This is </h1>
            </div>
        );
    }

Answer 3

因为第一次渲染组件时，this.state.myGif.data不存在，因为myGif的初始状态只是空。您应该检查数据是否已加载...

console.log(this.state.myGif.data ? this.state.myGif.data[0] : "Loading •••");

Answer 4

import React, { Component } from 'react';

export class Content extends Component {
    constructor(props) {
        super(props);

        this.state = {
            myGif: {data:["Image is getting Loaded"]},
        };
    }

    componentDidMount() {
        const api_key = 'rYJ5AxF8DXFqeX8ub81fbuje3J12lrh6';
        fetch(
            `http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=${api_key}&limit=3`
        )
            .then((response) => response.json())
            .then((json) => {
                console.log(json.data[0]);
                this.setState({ myGif: json });     
            });
    }

    render() {
        console.log(this.state.myGif.data[0]);
        return (
            <div>
                <h1>This is </h1>
            </div>
        );
    }
}

export default Content;

Answer 5

你不需要json()。

componentDidMount() {
        const api_key = 'rYJ5AxF8DXFqeX8ub81fbuje3J12lrh6';
        fetch(
            `http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=${api_key}&limit=3`
        )
            .then(response => {
                const data = response.data
                this.setState(data);     
            });
    }

然后在你的渲染函数中你可以console.log(this.state)看到你的整个状态。它是一个对象数组，因此如果要显示所有对象，则需要将其映射出来。你可以这样映射：

this.state.data.map((item,i) => <li key={i}>Test</li>)

因为在您的状态下 data 可能在第一次渲染时 undefined。您需要为 this.state.data

设置默认值 []

如果你想显示第一个你可以说this.state && this.state[0].type

从 this.setState() 索引数据时出错

Error while indexing data from this.setState()

javascript

object

setstate

reactjs

giphy