我有條件地渲染基于 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'）（僅默認匯出很快可用）”
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 是空白的
uj5u.com熱心網友回復：
嘗試像這樣匯入您的資料：
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 檔案中找到“媒體”的默認匯出。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/422627.html
標籤：
上一篇：未“授予”權限時打開警報功能