Question

在标记为重复之前，如果您请阅读一次，那会很棒。我真的在搜索这个。我正在编写一个React应用程序来生成模因。我可以成功连接REST API并能够获取数据。问题是，在尝试解析数据时，出现一个错误，总结出我正在尝试访问未定义的对象，但并非如此。

我在另一个编辑器中静态地尝试了相同的代码（没有React的渲染风格），并且运行良好。

这是我的代码，

class App extends React.Component{

    state = {memes : []};

    componentDidMount(){
        fetch(
            `https://api.imgflip.com/get_memes`

        ).then(
            (response) => {
                if(response.ok){
                    return response;
                }else{
                    console.log('no response');
                }
            }
        ).then(data => data.json()).then(data => {
            console.log(data); //This is getting printed fine
           // console.log(data.memes[1].name); //un-commenting this is throwing error that 'Cannot read property '1' of undefined'
            this.setState({memes:data.memes});


        });
 }
    render(){
        if(this.state.memes.length > 0){
            //For this I am getting error
            //Uncaught TypeError: Cannot read property 'length' of undefined
            console.log('array length is : ' + this.state.memes.length);
        }else{
            //This is printed fine
            console.log('Here array length is : ' + this.state.memes.length);

        }
        return (
            <div>
                <MemeImage/>
            </div>
        );
    }
}

export default App;

问题是，在第二次渲染（获取数据之后）期间，React假设data.memes不存在，这对我来说是荒谬的。根据我的控制台日志，它存在。例如：

data:
memes: Array(100)
0: {id: "112126428", name: "Distracted Boyfriend", url: "https://i.imgflip.com/1ur9b0.jpg", width: 1200, height: 800, …}
1: {id: "87743020", name: "Two Buttons", url: "https://i.imgflip.com/1g8my4.jpg", width: 600, height: 908, …}
2: {id: "102156234", name: "Mocking Spongebob", url: "https://i.imgflip.com/1otk96.jpg", width: 502, height: 353, …}
3: {id: "129242436", name: "Change My Mind", url: "https://i.imgflip.com/24y43o.jpg", width: 482, height: 361, …}

我从各自的网站检查了以下演示数据。因此，data.memes[0].name是完全有效的。我尝试了一下，就行了。

    {
    "success": true,
    "data": {
        "memes": [
            {
                "id": "61579",
                "name": "One Does Not Simply",
                "url": "https://i.imgflip.com/1bij.jpg",
                "width": 568,
                "height": 335,
                "box_count": 2
            }
    ]
    }
  }

但实际上，毫无头绪的是，在React渲染过程中发生了什么，它正在获取“数据”对象，但无法访问内部的属性。非常感谢我对React渲染不了解的任何帮助。

Answer 1

使用此代码

this.setState({memes:data.data.memes});

当您进行console.log记录数据时

console.log(data)

您得到

{
 data: Object
 success: true
}

因此，您需要进入数据才能访问模因，

无法解析React中通过fetch方法返回的JSON数据

1 个答案: