await fetch 返回2个数组，数据不能用

Question

我正在开发一个在后端使用 Express 并在前端做出反应的全栈项目。现在问题出在特定组件上。它应该从 /api/blogposts 获取数据库查询的结果。但后来就出错了。

这是我的代码：

import React from 'react';
import './Blogposts.css';
import SingleBpost from '../SingleBpost/SingleBpost.js';

class Blogposts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            receivedPosts: []
        };
    }
    async getBpostsFromServer() {
            const response = await fetch("/api/blogposts");
            let myPosts = await response.json();
            this.setState({receivedPosts: myPosts});
        }
    componentDidMount() {
        this.getBpostsFromServer();
    }
    render() {
        console.log(this.state.receivedPosts);
        return(
            <div id="Blogposts">
            <SingleBpost title="Test" date="18/12/2021" author="Kepos Team" body="Hello, this is a test for the blogposts!" />
            </div>
        );
    }
}


export default Blogposts;

只有一个console.log：console.log(this.state.receivedPosts);但是控制台给了我两个结果：首先它打印一个我不认识的数组，然后它打印我需要的数组。 （这里是截图https://imgur.com/a/q40aVkq）。

但是当我尝试将 this.state.receivedPosts 中的数据输入到我的组件中时：

<SingleBpost title={this.state.receivedPosts[0].title} (etc etc) />

它不起作用（我的屏幕实际上变成了空白）。

有人知道我在这里做错了什么吗？感谢您的帮助！

Answer 1

您可以使用&& 来保护您免受这种情况的影响

render() {
        return (
            this.state.receivedPosts && this.state.receivedPosts.length
            <div id="Blogposts">
            <SingleBpost title="Test" date="18/12/2021" author="Kepos Team" body="Hello, this is a test for the blogposts!" />
            </div>
        );
    }

或者通过三元运算符处理：

 render() {
            return (
                this.state.receivedPosts && this.state.receivedPosts.length ?
                <div id="Blogposts">
                <SingleBpost title="Test" date="18/12/2021" author="Kepos Team" body="Hello, this is a test for the blogposts!" />
                </div> : null
            );
        }