Javascript ReactJS错误地声明字符串是对象，并拒绝呈现

设置和环境：应用程序是使用create react App创建的，包含在App.js中，并在命令行中使用npm start运行

强制性源代码：

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';

async function getRemoteData() {
  var result = [];
  const response = await fetch('some.site.that.returns.json'); // not the actual URL although you get the idea
  const json = await response.json();
  for (const entry of json.entry) {
    result.push(json.fullUrl);
    console.log(json.fullUrl);
  }
  console.log("String representation");
  console.log(result.toString());
  // Following commented string used to test ReactJS functionality
  // return "";
  return result.toString(); 
}

// minimalist self-explanatory class that dumps a message to the browser
class Message extends React.Component {
    render() {
      return (
        <div>
          <h2>{this.props.text}</h2>
        </div>
      );
    }
}

function App() {
  return ReactDOM.render(<Message text={getRemoteData()} />, document.getElementById('root'));
}

export default App;

从“React”导入React；
从“react dom”导入react dom；
从“/logo.svg”导入徽标；
导入“/App.css”；
异步函数getRemoteData（）{
var结果=[]；
const response=await fetch（'some.site.that.returns.json'）；//不是实际的URL，尽管您知道
const json=await response.json（）；
for（json.entry的常量条目）{
push（json.fullUrl）；
log（json.fullUrl）；
}
log（“字符串表示”）；
log（result.toString（））；
//下面是用于测试ReactJS功能的注释字符串
//返回“”；
返回result.toString（）；
}
//将消息转储到浏览器的最简自解释类
类消息扩展了React.Component{
render（）{
返回(
{this.props.text}
);
}
}
函数App（）{
返回ReactDOM.render（，document.getElementById（'root'）；
}
导出默认应用程序；

这只会产生一个无用的、无法追踪的错误：

错误：对象作为React子对象无效（找到：[对象承诺]）。如果要呈现子对象集合，请改用数组。 在h2中（见附录js:23） 在div中（在App.js:22中） 在消息中（App.js:31）

首先，getRemoteData根本不应该返回承诺。它应该返回一个字符串——从return语句中非常明显。我在中使用了kudlajz的答案-使用await修复异步方面，然后返回底层值

---

接下来，我设置了getRemoteData以返回一个空字符串-test-ReactJS。如果它声称空字符串是无效对象，则会产生相同的结果，这是一个严重的问题。下一步，这绝对不会提供任何关于哪里出了问题的信息。你有什么办法让它工作吗？为什么要返回一个对象（而不是字符串？

getRemoteData

是一个

异步

函数。它返回一个Promise，它是一个对象

要处理异步数据，需要将结果存储在状态中，并使用该状态

---

另请参阅React常见问题解答：

如何使其自动解决，然后以最小的麻烦？将数据置于状态。让render方法检查状态以查看数据是否存在。如果没有，您可能希望显示加载微调器。常见问题解答有一个例子。测试了常见问题解答中的说明，效果良好。享受你的投票，并回答接受。