我收到一個錯誤：對象作為 React 子對象無效（找到：[object Promise]）

Question

我對 React 有點陌生。 我得到了這個錯誤：對象作為 React 子對象無效（找到：[object Promise]）。 我不知道如何解決這個問題。 大家可以看看嗎？ 謝謝！

這是我的代碼。

import React, { Component } from "react";
import "./App.css";

async function randomVerse() {
  const url = "https://labs.bible.org/api/?passage=random&type=json";
  const passage = await fetch(url);
  const passageJson = await passage.json();

  return passageJson;
}

const displayRandomVerse = async () => {
  let result = await randomVerse();
  let verse = "";
  verse += result[0].text;
  return verse;
};

const returnVerse = displayRandomVerse();

class App extends Component {
  constructor() {
    super();
    this.state = {
      verse: null
    };
  }

  componentDidMount() {
    this.setState({verse: returnVerse});
  };

  render() {
    return (
      <div className="App">
        <h1>Good Morning, XXX!</h1>
        <h3>Bible verse : {this.state.verse} </h3>
      </div>
    );
  }
}

export default App;

Answer 1

你必須在const returnVerse = await displayRandomVerse(); 中設置 await . 這應該給你價值

Answer 2

您需要在 componentDidMount 方法中獲取並等待

async function randomVerse() {
      const url = "https://labs.bible.org/api/?passage=random&type=json";
      const passage = await fetch(url);
      const passageJson = await passage.json();
    
      return passageJson;
    }
    
    const displayRandomVerse = async () => {
      let result = await randomVerse();
      let verse = "";
      verse += result[0].text;
      return verse;
    };
    
    
    class App extends Component {
      constructor() {
        super();
        this.state = {
          verse: null
        };
      }
    
      async componentDidMount() {  //Notice changes in this section
        this.setState({verse: await displayRandomVerse()});
      };
    
      render() {
        return (
          <div className="App">
            <h1>Good Morning, XXX!</h1>
            <h3>Bible verse : {this.state.verse} </h3>
          </div>
        );
      }
    }
    
    export default App;