Блог

Главная - Вопросы по программированию - Как передать данные Json из одной папки в другую папку в react

Как передать данные Json из одной папки в другую папку в react

#json #reactjs #import

#json #reactjs #импорт

Вопрос:

Я работаю над проектом React, где я пытаюсь передать jsondata из одной папки в другую папку, но это не работает. Он показывает ошибку, подобную этой

./src/Pages/Dashboard/Dashboard.js Модуль не найден: не удается разрешить ‘./API/jsondata’

Это мой код

Это jsondata.js

 {
    user: [
        {
            'id': '1',
            'name': 'test1',
            'age': '11',
            'gender': 'male',
            'email': 'test1@gmail.com'
        },
        {
            'id': '2',
            'name': 'test2',
            'age': '12',
            'gender': 'male',
            'email': 'test2@gmail.com'
        }, {
            'id': '3',
            'name': 'test3',
            'age': '13',
            'gender': 'male',
            'email': 'test3@gmail.com'
        }, {
            'id': '4',
            'name': 'test4',
            'age': '14',
            'gender': 'male',
            'email': 'test4@gmail.com'
        }, {
            'id': '5',
            'name': 'test5',
            'age': '15',
            'gender': 'male',
            'email': 'test5@gmail.com'
        },
        {
            'id': '6',
            'name': 'test6',
            'age': '16',
            'gender': 'male',
            'email': 'test6@gmail.com'
        },
    ]
}

Это Dashboard.js

 import React from 'react';
import Jsondata from './API/jsondata'
import './Dashboard.css';

const Dashboard = () => {
    console.log(Jsondata, 'data')
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                </div>
            </div>
        </div>
    )
}

export default Dashboard

Есть идеи, что может быть причиной проблемы?

Комментарии:

1. Какова общая структура папок? как вы переходите от «панели мониторинга» к «API»?

2. Как js файл, экспорт отсутствует и, следовательно, не является модулем. Как файл JSON (вам нужно переименовать), это недопустимый JSON, поскольку «пользователь» не в кавычках.

Ответ №1:

Причин может быть много:

Во-первых, вы не экспортировали свои данные из файла json.

 export const Jsondata = [
  {
        'id': '1',
        'name': 'test1',
        'age': '11',
        'gender': 'male',
        'email': 'test1@gmail.com'
    },
    {
        'id': '2',
        'name': 'test2',
        'age': '12',
        'gender': 'male',
        'email': 'test2@gmail.com'
    },
];

Во-вторых, возможно, ваш путь к файлу неверен.Просто дважды проверьте это.Здесь вы указали имя Jsondata, но в файле json такого const нет.

 import {Jsondata} from './API/jsondata'

Ответ №2:

Вы можете определить variable внутренний jsondata.js файл.

Нравится;

 const users = [
...
];

export { users };

И из Dashboard.js , вы можете импортировать как

 import { users } from './API/jsondata';

Ответ №3:

Переименуйте файл jsondata в data.json (файл должен иметь .расширение json), а затем это работает. Ваш импорт может быть опущен.расширение json, подобное этому

 import mydata from "./data";

Примечание: вам не нужно ничего экспортировать в файл data.json