时间戳

首页 > 解决方案 > 如何正确导出 JSON 文件？

json - 如何正确导出 JSON 文件？

问题描述

我有一个 API url，我将在其中执行获取请求。但我不想直接从我的组件中使用它。我想将结果存储到一个 json 文件中并从我的组件中导入它。

伪代码示例：

// example.json
let data = fetch(url).then()

export data

// Buy.jsx
import data from './data/example.json

useEffect(
//... store it to the state
)

实现这一点的正确方法是什么？

标签： jsonreactjsaxiosreact-hooksfetch

解决方案

我相信这个代码片段将涵盖所有需求：

import React from 'react'

const App = () => {
  const [posts, setPosts] = React.useState([]);
  
  React.useEffect(() => {

    const fetchData = async() => {
      const result = await fetch('https://jsonplaceholder.typicode.com/posts');

      //whatever you receive convert to the JSON format ('axios' does this by default)
      const data = await result.json();
      // console.log('data: ', data);
      setPosts(data);
    }
    fetchData();
  }, []);

  return (
    <div>
    {posts.map(
        post => (
          <React.Fragment key={post.id}>
            <h1>{post.title}</h1>
            <p>{post.body}</p>
          </React.Fragment>
        )
      )
    }
</div>
  )
}

export default App;

解释：

此示例使用Fetch API一个内置的 JavaScript 解决方案，用于从任何来源查询 REST API。一旦您收到来自 API 提取的结果，就会将其转换为 JSON 格式。接下来的步骤是使用setPosts(data)在组件开头定义的方法保存结果。

参考：

随时询问有关此代码的任何问题。

推荐阅读