如何在javascript中更改json文件导入路径

Question

嗨，这是有效的，我需要改变的。 我的 SCR 文件夹下有一个用于测试目的的数据文件夹，其中有许多 json 文件。

我实际上有许多反应列表组件，我想通过传递 json 文件名和路径而不是对其进行硬编码来将它们更改为仅一个通用组件。 这有效

import React from 'react'
import { Link } from 'react-router-dom'
import * as s from '../../components/Shared/ListCards.styles'

import ListData from '../../data/user.json'

const ListCards = () => {
    const listJSX = ListData.map((user, index) => {
        return ()

我想改变

import ListData from '../../data/user.json'
to
import ListData from 'path/filename.json'

路径和文件名存储在 localStorage 中

localStorage.getItem('colName')

Answer 1

您可以使用动态导入

const { default: ListData } = await import('path/filename.json');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

---

如果本地存储中存储的路径与 URL 相关，您可能需要考虑使用 fetch api：

const ListCards = () => {
    const { listData, setListData } = useState([]);
    (async () => {
        const response = await fetch('/urlpath/filename.json')
        const data = await response.json()
        setListData(data)
    })();
    const listJSX = listData.map((user, index) => {
        return ()