Question

在 React 的 useEffect() 中获取数据返回数据“未定义”

2021-03-18

882

reactjs api

我尝试使用 effect hook 在 reactjs 中获取数据，但在访问返回的 div 后，它显示数据未定义，代码如下

import React,{ useEffect } from 'react'

export default function Home() {
useEffect(() => {
    fetch("https://lighthouse-dot-webdotdevsite.appspot.com//lh/newaudit", {
      method: "POST",
      body: JSON.stringify({
      "url": "https://piyushsthr.netlify.app",
      "replace": true,
      "save": false
    }),
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      },
      credentials: "same-origin"
    })
     .then(res => res.json()) // this is the line you need
     .then(function(data) {
  
  
      console.log(data.lhrSlim[0].score)
      //return data;
  
    }).catch(function(error) {
      // eslint-disable-next-line no-unused-expressions
      error.message
    })
  }, )
  return (
    <div>
      <h1>{data.lhrSlim[0].score}</h1>
    </div>
  )
}

有人能帮我解决这个问题吗

Answer 1

您无法直接在 UI 上直接显示请求的内容，要做到这一点，它必须是一个 prop 或存储在状态中，例如您可以这样做。

import React, { useEffect, useState } from 'react'

export default function Home() {
const [State, setState] = useState("");

useEffect(() => {
    fetch("https://lighthouse-dot-webdotdevsite.appspot.com//lh/newaudit", {
      method: "POST",
      body: JSON.stringify({
      "url": "https://piyushsthr.netlify.app",
      "replace": true,
      "save": false
    }),
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      },
      credentials: "same-origin"
    })
     .then(res => res.json()) // this is the line you need
     .then(function(data) {
  
      setState(data.lhrSlim[0].score);

    }).catch(function(error) {
      // eslint-disable-next-line no-unused-expressions
      error.message
    })
  }, )
  return (
    <div>
      <h1>{State}</h1>
    </div>
  )
}

这样，您将能够将来自响应的数据直接存储在组件的状态中，然后能够显示它。

Answer 2

要显示来自 api 的数据，请在组件中添加一个状态。

const [score, setScore] = useState([]);

然后设置分数

 .then(function (data) {
    setScore(data?.lhrSlim[0]?.score);
  })

https://codesandbox.io/s/proud-surf-v9gjb?file=/src/App.js