如何在React中顯示來自json的資料

我嘗試創建生成隨機報價的簡單應用程式。我創建了一個函式，（我認為）從 json 檔案中獲取我想要的資料。但是當我嘗試將該函式傳遞給我的 App 函式時，我得到錯誤：物件作為 React 子物件無效（發現：[object Promise]）

功能報價：

function Quote (data) {
  var x = (Math.floor(Math.random() * (103 - 1)   1) );
  return fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
  .then((response) => response.json())
  .then((responseJson) => {

    console.log(responseJson['quotes'][0]['author']);
    return responseJson['quotes'][x]['author'];
  })


  
  .catch((error) => {
    console.error(error);
  });
}

應用功能：

function App() {
  var text = '';
  return (
    
    <div id="quote-box">
      <div id="author"><Quote /></div>
      <button id="new-quote">New Quote</button>
      <a href="twitter.com" id="tweet-quote">Tweet</a>
    </div>
  );
}

uj5u.com熱心網友回復：

我會使用 useEffect 在開始時觸發呼叫。并使用 useState 來保存值。然后還將相同的邏輯添加到 onClick。

import { useEffect, useState } from "react";

function getQuote() {
  var x = Math.floor(Math.random() * (103 - 1)   1);
  return fetch(
    "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
  )
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson["quotes"][0]["author"]);
      return responseJson["quotes"][x]["author"];
    })

    .catch((error) => {
      console.error(error);
    });
}

export default function App() {
  const [author, setAuthor] = useState("");

  useEffect(() => {
    getQuote().then((newAuthor) => setAuthor(newAuthor));
  }, []);
  return (
    <div id="quote-box">
      <div id="author">{author}</div>
      <button
        id="new-quote"
        onClick={() => getQuote().then((newAuthor) => setAuthor(newAuthor))}
      >
        New Quote
      </button>
      <a href="twitter.com" id="tweet-quote">
        Tweet
      </a>
    </div>
  )
}

uj5u.com熱心網友回復：

您也可以通過這種方式存檔。創建自定義掛鉤并使用它。

import React from "react";

function useFetchQuote(newQuote) {
  const [author, setAuthor] = React.useState();

  React.useEffect(() => {
    var x = Math.floor(Math.random() * (20 - 1)   1);
    return fetch(
      "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson["quotes"][x]["author"]);
        setAuthor(responseJson["quotes"][x]["author"]);
      })
      .catch((error) => {
        console.error(error);
      });
  }, [newQuote]);

  return { author };
}

function App() {
  const [newQuote, setQuote] = React.useState(0);
  const { author } = useFetchQuote(newQuote);

  return (
    <div id="quote-box">
      <div id="author">{author}</div>
      <button id="new-quote" onClick={() => setQuote(newQuote   1)}>
        New Quote
      </button>
      <a href="twitter.com" id="tweet-quote">
        Tweet
      </a>
    </div>
  );
}

export default App;

uj5u.com熱心網友回復：

在React組件中回傳承諾不會像您在代碼中所做的那樣作業。React組件必須回傳一個jsx. 例如在一個名為的檔案中Quote.js

import * as React from 'react';

const url =
  'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json';

const Qoute = () => {
  const [quote, setQuote] = React.useState(null);

  React.useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        const randomNumber = 1; // Generate random number which is lesser or equal to data's length
        setQuote(data['quotes'][randomNumber]);
      });
  }, []);

  if (!quote) return <React.Fragment>Loading...</React.Fragment>;

  return <div>{JSON.stringify(quote)}</div>;
};

export default Qoute;

然后你只需要將它匯入到你想使用它的地方并像這樣呼叫它

<Quote />

PS：typescript如果某些東西不起作用，我將其轉換為我很樂意提供幫助。也請記住更新行，我把評論。祝你好運，兄弟。

標籤：javascript 反应 json

上一篇：從React應用程式呼叫herokuAPI，錯誤200

下一篇：反應onclicksetState不適用于箭頭功能