0

我正在使用 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：无法从未定义中读取属性“0”

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

5 回答 5

1

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

console.log(this.state.myGif.data ? this.state.myGif.data[0] : "Loading •••&quot;);
于 2020-07-31T09:51:54.033 回答
1

你不需要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第一次渲染。您需要设置默认值[]forthis.state.data

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

于 2020-07-31T09:54:21.187 回答
1

尝试console.log像这样的数据：

console.log(
      this.state.myGif.data
        ? this.state.myGif.data[0]
        : "data is not downloaded yet"
    );
于 2020-07-31T09:49:04.563 回答
0 

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;

于 2020-07-31T09:52:32.053 回答
0

你的fetch和setState调用都是异步的。在获取时，您的renderwill 已经被调用。

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

 render() {
        this.state.myGif && console.log(this.state.myGif.data[0]);
        return (
            <div>
                <h1>This is </h1>
            </div>
        );
    }
于 2020-07-31T09:49:35.183 回答