ReactJS 错误地声称一个字符串是一个对象并拒绝呈现

Question

设置和环境：应用程序使用 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 子对象无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组。在 h2 (at App.js:23) 中的 div (at App.js:22) in Message (at App.js:31)

首先， getRemoteData 根本不应该返回一个 Promise。它应该返回一个字符串——从返回语句中可以明显看出。我在Fetch 中使用了 kudlajz 的答案：设置带有 fetch 响应的变量并从函数返回- 使用 await 修复异步方面，然后返回基础值。

接下来，我设置了 getRemoteData 故意返回一个空字符串——测试 ReactJS。相同的结果如果它声称空字符串是无效对象，那是一个严重的问题。接下来，这绝对没有提供关于出了什么问题的信息。任何想法如何让它发挥作用？为什么要返回一个对象（而不是字符串）？

Answer 1

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

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

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