Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead (React)

Question

我想在我的 React 应用程序中显示这个“What”，但我仍然遇到同样的错误。它实际上将其记录在控制台中，但在页面上始终存在相同的错误：

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead (React)

快速路线：

const express = require('express');
router = express.Router();

router.get("/", (req, res) => {
    res.send("What")
});

module.exports = router;

反应组件：

import React from 'react';

class Login extends React.Component {
    render() {
        function BackendRes() {
            const response = fetch("/login")
                                .then(res => res.text())
                                .then(text => console.log(text));
            return response;
        }
        return (
            <div>
                <BackendRes />
            </div>
        )
    }
}

export default Login;

Answer 1

仅在初始渲染期间使用componentDidMount 生命周期方法调用api。然后设置 state 以保持来自 api 的数据，如下所示。然后使用 state 显示 text 里面的 div.

import React from "react";

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: "",
    };
    this.BackendRes = this.BackendRes.bind(this);
  }

  componentDidMount() {
    this.BackendRes();
  }

  BackendRes() {
    const response = fetch("/login")
      .then((res) => res.text())
      .then((text) => {
        this.setState({ data: text });
        console.log(text);
      });
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

export default Login;

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead (React)

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead (React)

components

backend

express

reactjs