React中如何从默认导出模块导出？及导入destinations报错解决

从默认导出模块导入内容 #

对于仅提供默认导出的模块（比如JSON文件、用export default导出的组件/工具函数），导入时无需使用大括号，直接指定自定义名称即可：

import myModule from './path/to/module'

如果需要从默认导出的对象中提取特定属性，可在导入后解构：

import data from './data.json'
const { targetProp } = data

重新导出默认模块 #

若要将其他模块的默认导出重新导出，有两种常用写法：

• 直接转发默认导出：

export default from './path/to/Module'

• 重命名后导出为命名导出：

export { default as RenamedModule } from './path/to/Module'

你遇到的错误是因为JSON文件属于仅支持默认导出的模块，但你使用了命名导入语法尝试提取destinations，这不符合ES模块对JSON的处理规范。修复方法如下：

方案1：导入后解构 #

修改导入语句为默认导入，再从导入的对象中解构出destinations：

import React from 'react'
import { useState } from 'react'
// 替换命名导入为默认导入
import data from '../assets/space-tourism-website-main/starter-code/data.json'
const { destinations } = data

const Destinations = () => {
    const [planets] = useState(destinations)
    console.log(planets)

  return (
    <div>
    </div>
  )
}

export default Destinations

方案2：直接在useState中访问属性 #

也可以简化代码，直接在useState中访问默认导入对象的destinations属性：

import React from 'react'
import { useState } from 'react'
import data from '../assets/space-tourism-website-main/starter-code/data.json'

const Destinations = () => {
    const [planets] = useState(data.destinations)
    console.log(planets)

  return (
    <div>
    </div>
  )
}

export default Destinations

错误原因说明 #

ES模块规范里，JSON文件的整个内容会被作为单一默认导出，不存在任何命名导出项。你之前用{destinations}的写法，是在尝试从模块中获取名为destinations的命名导出，但该模块根本没有这个导出项，因此工具链（如ESLint、webpack）会抛出警告提示你修正导入方式。

内容的提问来源于stack exchange，提问作者user17220558