如何解决 React js 中 JSON 的 React 导出错误？

Question

我正在根据 JSON 有条件地渲染组件。但我收到此错误“不应从默认导出模块导入命名导出 'main'（导入为 'main'）（仅默认导出即将可用）”

我的 mappingJson.js 工作正常（没有错误）并且文件看起来像这样（为了调试而简化）。

import React, { Component } from "react";
import Plyr from "plyr-react";
require("../mediaData.json");

class mappingJson extends Component {
  render() {
    if (this.props.data) {
      var surgeryData = this.props.data.surgeryMedia;
    }

    return (
      <div>
        {surgeryData.map((data) => (
          
            
                  <div class="container">
                    {data.type === "img" ? (
                      <img height="140" src={data.media} alt="candidatePic" />
                    ) : data.type === "audio" ? (
                      <div>
                        {data.txt}
                        <Plyr
                          source={{
                            type: data.type,
                            sources: [
                              {
                                src: data.media,
                              },
                            ],
                          }}
                        />
                      </div>
                    ) : data.type === "video" ? (
                      <div>
                        {data.txt}
                        <Plyr
                          source={{
                            type: data.type,
                            sources: [
                              {
                                src: data.media,
                                provider: "youtube",
                              },
                            ],
                          }}
                        />
                      </div>
                    ) : (
                      <div>{data.txt}</div>
                    )}
                  </div>
                
        ))}
      </div>
    );
  }
}

export default mappingJson;

然后将该组件与 JSON 文件一起传递到我的 ExplorePage.js 以进行映射。看起来像这样。我得到的错误在第 4 行。错误是“不应从默认导出模块导入命名导出 'main'（导入为 'main'）（仅默认导出即将可用）”。 =13=]

import React, { Component, useLayoutEffect } from "react";
import styles from "./index.module.css";
import Explore from "../Explore/index"
import {main} from "../mediaData.json" (Line that throws error)!!

class ExplorePage extends Component {
  render() {
    return (
      <div>
        <Explore data={main}></Explore>
      </div>
    );
  }
}

export default ExplorePage;

如有任何帮助，我们将不胜感激。提前致谢。

注意：删除 {main} 周围的括号可以消除错误，但数据不会导出并且 explorePage 为空白

Answer 1

尝试像这样导入您的数据：

import mediaData from "../mediaData.json"

那么您应该能够通过解构来访问您的数据：

const { main } = mediaData; //keep the rest of the code the same

或

data={mediaData.main} //if you don't want to deconstruct

您收到错误的原因是它试图在您的 json 文件中查找“媒体”的默认导出。

如何解决 React js 中 JSON 的 React 导出错误？

How to resolve react export error for JSON in react js?

javascript

import

json

reactjs

react-native