在一個reactjs組件中顯示json數據

Question

我是新來的反應和獲取數據 api。我不知道如何在我的組件之一中顯示 json 數據。 我已經使用 axios 從 api 獲取數據，這是我返回的 json 數據

{
  "result": true,
  "items": [
    {
      "excerpt": "egghead is your source for the Badass Portfolio Projects you need to climb the career ladder as a modern web developer.",
      "_id": 360690368,
      "title": "Build the portfolio you need to be a badass web developer.",
      "link": "https://egghead.io/",
      "domain": "egghead.io"
    },
    {
      "excerpt": "From career choices to new purchases, use René Girard’s mimetic theory to resist the herd and forge your own path in life",
      "_id": 359605780,
      "link": "https://psyche.co/guides/how-to-know-what-you-really-want-and-be-free-from-mimetic-desire?ref=refind",
      "title": "How to know what you really want | Psyche Guides",
      "domain": "psyche.co"
    }
  ],
  "count": 2,
  "collectionId": 0
}

這是列表組件：

import * as React from "react"
import axios from "axios"

axios.get("https://api.abc.com", {
  method: "get",
  headers: {
    Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`,
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(res => {
  const bookmarks = JSON.stringify(res.data)
  console.log(bookmarks)
})
.catch(error => {
  console.error(error)
})

const IndexPage = ({ bookmarks }) => (
  <>
    <h1>Show Data</h1>
    <div>
      {bookmarks.items.map(bookmark => (
        <div>{bookmark.title}</div>
      ))}
    </div>
  </>
)

export default IndexPage

誰能幫我顯示列表？ 提前致謝

Answer 1

這不是在 React 中獲取數據的方式......您必須在組件useEffect中獲取數據並將數據存儲在useState掛鈎中，這將導致重新渲染並且您可以訪問此數據：

import * as React from "react"
import axios from "axios"



const IndexPage = () => (
const [bookmarks, setBookmarks] = React.useState()

React.useEffect(()=>{
axios.get("https://api.abc.com", {
  method: "get",
  headers: {
    Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`,
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(res => {
  const bookmarks = JSON.stringify(res.data)
  setBookmarks(bookmarks)
})
.catch(error => {
  console.error(error)
})
},[])
return(
  <>
    <h1>Show Data</h1>
    <div>
      {bookmarks.items.map(bookmark => (
        <div>{bookmark.title}</div>
      ))}
    </div>
  </>
)

---

編輯：使用自定義加載解決方案：

import * as React from "react"
import axios from "axios"


const IndexPage = () => (
const [loading, setLoading] = React.useState(true)
const [bookmarks, setBookmarks] = React.useState()

React.useEffect(()=>{
axios.get("https://api.abc.com", {
  method: "get",
  headers: {
    Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`,
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(res => {
  const bookmarks = JSON.stringify(res.data)
  setBookmarks(bookmarks)
})
.catch(error => {
  console.error(error)
}).finally(()=>{setLoading(false)});
},[])

if(loading){
 return (<>Loading...</>)
}

return(
  <>
    <h1>Show Data</h1>
    <div>
      {bookmarks.items.map(bookmark => (
        <div>{bookmark.title}</div>
      ))}
    </div>
  </>
)