Для подгрузки информации с mock-сервера при загрузке страницы в React, можно использовать методы жизненного цикла компонента, в частности componentDidMount()
.
1. В первую очередь, необходимо установить mock-сервер, который будет эмулировать API-запросы и возвращать нужные данные. Например, можно использовать библиотеку json-server
, которая позволяет создать RESTful API на основе JSON файла. Установить ее можно с помощью команды npm install -g json-server
.
2. Далее, создаем компонент React, который будет отображать полученные данные. В этом компоненте обращаемся к API в методе componentDidMount()
.
import React, { Component } from "react"; class MyComponent extends Component { state = { data: {}, isLoading: true, error: null }; componentDidMount() { fetch("http://localhost:3000/data") // Адрес вашего mock-сервера .then(response => { if (response.ok) { return response.json(); } else { throw new Error("Ошибка загрузки данных"); } }) .then(data => this.setState({ data: data, isLoading: false })) .catch(error => this.setState({ error, isLoading: false })); } render() { const { data, isLoading, error } = this.state; if (error) { return <div>Произошла ошибка: {error.message}</div>; } if (isLoading) { return <div>Загрузка...</div>; } return ( <div> {/* Отображение полученных данных */} {data.map(item => ( <div key={item.id}>{item.name}</div> ))} </div> ); } } export default MyComponent;
Здесь мы используем метод fetch()
для выполнения GET-запроса к адресу нашего mock-сервера (http://localhost:3000/data
), который возвращает данные в формате JSON. Затем, в зависимости от результата запроса, мы обновляем состояние компонента (setState()
) и отображаем полученные данные.
3. В основном компоненте приложения или в файле, где вы хотите использовать компонент MyComponent
, импортируем его и добавляем в render.
import React from "react"; import MyComponent from "./MyComponent"; function App() { return ( <div> <h1>Мое приложение</h1> <MyComponent /> </div> ); } export default App;