加载后呈现页面反应 json

Question

我有 load() 函数：

async function load() {
    let url = `www.com/file.json`
    let data = await (await fetch(url)).json()
    return data
}

我需要在从服务器加载 json 文件后呈现我的页面：

export const Page = async () => {
    const data_ = await load()
    return (
          <div className="page">
                content
          </div>
    )
}

我该怎么做？

Answer 1

你可以使用useEffect钩子在组件挂载时调用，它会被调用一次并获取你需要的数据，然后将其设置为data状态用于div里面的return。

由于您没有提供响应的结构，我无法就如何呈现数据本身给出更详细的解释。 id_ 在您的示例中也没有用，但我将其保留在那里以与您的示例非常相似。

import React, {useState, useEffect} from "react";

export const Page = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    const load = async (id_) => {
        let url = `www.com/file.json`
        let data = await (await fetch(url)).json()
        const manipulatedData = ...
        // do manipulation
        setData(manipulatedData)
    }
    load()
  }, [])

  return (
    <div className="page">
      {data ? data : null}
    </div>
  );
}

export default Page;

Answer 2

您需要使用 useEffect 和 useState

以下是实现此目标的方法：

import {useState, useEffect} from 'react';

export const Page = () => {
  const [data, setData] = useState();
  useEffect(() => {
    async function load() {
      let url = `www.com/file.json`;
      let data = await (await fetch(url)).json();
      setData(data);
    }

    load();
  }, []);

  return <div className="page">{JSON.stringify(data)}</div>;
}

将 JSON.stringify 替换为 data.something 以显示数据中的特定字段

一些提示：

React 组件不能是异步函数
useState 包含渲染页面所需的变量
useEffect 是一个函数，让您的组件处理调用异步代码或任何其他类型的 side effect

Answer 3

您可以使用挂钩 useEffect() & useState() 来加载您的数据：

function load() {
    let url = `www.com/file.json`
    let data = await (await fetch(url)).json()
    return data
}

export const Page = async () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    load().then((_data) => {
       setData(_data)
    })

  }, [])

  if (!data) {
    return <div>loading data...</div>
  }

  return (
    <div className="page">
      data is ready to use !
    </div>
  )
}

加载后呈现页面反应 json

Render page on react after loading json

json

async-await

reactjs