加载json后在react上渲染页面答案

【问题标题】：Render page on react after loading json加载json后在react上渲染页面
【发布时间】：2022-02-04 08:39:23
【问题描述】：

我有 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>
    )
}

我该怎么做？

【问题讨论】：

标签： reactjs json async-await

【解决方案1】：

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

由于您没有提供响应的结构，因此我无法更详细地解释如何呈现数据本身。 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;

【讨论】：

看起来很酷！但是我怎么能像这样使用它：const [renderFlag, setRenderFlag] = useState(false)return (<div>{renderFlag && <div>done!</div>}</div>)？
你能定义一下你想要达到的目标吗？另外，我添加了一些答案，因为我对导致无限循环并不完全准确。这个特定的代码似乎不会发生。
我想在渲染之前对来自 json 的数据进行一些操作。所以我（可能）想要制作标志，并在 setFlag(true) 之后渲染页面。那样的东西
请再看一遍，我稍微修改了代码以反映您的愿望。我认为您不需要另一个状态，只需操作数据然后将其设置为状态即可。我们可以使用数据本身来检查里面是否有东西，如果没有就不会渲染。

【解决方案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

【讨论】：

【解决方案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>
  )
}

【讨论】：