Блог

Главная - Вопросы по программированию - Как асинхронно загружать реквизит для функционального компонента в React

Как асинхронно загружать реквизит для функционального компонента в React

#javascript #reactjs #asynchronous #async-await

#javascript #reactjs #асинхронный #async-ожидание

Вопрос:

Я пытаюсь ускорить свое приложение, и для этого я откладываю загрузку некоторых компонентов. Один из моих функциональных компонентов загружается из файла .json, и было бы неплохо также отложить его загрузку, но я не уверен, как это сделать. В настоящее время мой код выглядит следующим образом:

 import React from 'react';
import Presentation from "../Presentation";

const data = () => import("../assets/sample.json");

const Finder = (props) => {

    const {prop1} = props;

    return ( <Presentation data={data} selection={prop1} /> );
};

export default Presentation;

При попытке отрисовки компонента представления происходит сбой с ошибкой (данные не определены). Как я мог лениво загрузить файл json? Возможно ли это с помощью библиотеки, загружаемой с помощью react? Спасибо!

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

1. используйте React.lazy или Suspense , проверьте документ для получения более подробной информации.

2. использование const data = React.lazy(() => import(«../assets/sample.json») выдает мне ту же ошибку.

3. можете ли вы показать сообщение об ошибке?

4. Из компонента представления приходит сообщение об ошибке, в котором говорится, что данные не определены. Не удается прочитать свойство ‘map’ undefined.