React渲染接口返回值时报错Objects are not valid as a React child如何解决？

你定义的<BackendRes>组件返回了fetch调用生成的Promise对象，React 不支持直接将 Promise 作为可渲染的子元素，因此抛出该错误。同时将接口请求逻辑放在render方法内也不符合规范，会导致每次组件重渲染都重复触发请求。

通过类组件的 state 存储接口返回的文本内容，将请求逻辑移到componentDidMount生命周期钩子中执行，拿到返回结果后更新 state 即可正常渲染。
修正后的 React 组件代码如下：

import React from 'react';

class Login extends React.Component {
    // 初始化state，存储接口返回文本
    state = {
        backendRes: ''
    }

    componentDidMount() {
        // 组件挂载完成后发起请求
        fetch("/login")
            .then(res => res.text())
            .then(text => {
                console.log(text);
                // 更新state触发重渲染
                this.setState({ backendRes: text });
            })
    }

    render() {
        return (
            <div>
                {/* 渲染state中存储的接口返回值 */}
                {this.state.backendRes}
            </div>
        )
    }
}

export default Login;

内容的提问来源于stack exchange，提问作者Aqua