如何正确导出 JSON 文件？答案

【问题标题】：How do I export an JSON file correctlly react?如何正确导出 JSON 文件？
【发布时间】：2021-03-22 17:41:08
【问题描述】：

我有一个 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
)

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

【问题讨论】：

在浏览器中运行的 React 应用程序无法写入文件。两种方法是在运行时调用 API 或获取数据并在编译时或之前将其写出以便能够import 它。

标签： json reactjs axios react-hooks fetch

【解决方案1】：

你可以这样做，而不是 json

const movies_data = {
"data": [
            {
              "id": 1,
              "title": "Freed"
        },
        {
              "id": 2,
              "title": "Fifty"
        }
        ]
    }
export default movies_data;

然后可以导入到你想要的地方

【讨论】：

这是一种方式，另一种方式是不需要导出JSON文件。只需将其保留为纯 JSON 文件，并在导入时使用别名导入并使用它。例如从“your_path_to_json_file”导入电影数据

【解决方案2】：

我相信这段代码 sn-p 将涵盖所有需求：

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) 方法保存结果。

参考资料：

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

【讨论】：