Получение и отображение данных с помощью React - PullRequest
Новая
       24

Получение и отображение данных с помощью React

0 голосов
/ 04 мая 2020

Я новичок, чтобы реагировать и пытался это в течение долгого времени без какого-либо успеха. Может быть, кто-то может посмотреть и определить ошибку, которую я делаю. вот мой код У меня есть файл App. js со страницей маршрута к сервисам, где я хочу отображать и отображать данные с сервисами из базы данных mysql с реагированием и JSX. 

import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import Footer from "./Footer";
import Header from "./Header";
import axios from "axios";

class Services extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      services: [],
    };
  }
  componentDidMount() {
    axios
      .get("http://localhost:5000/services")
      .then((response) => this.setState({ services: response.data }));
  }

  render() {
    var { services } = this.state;
    return (
      <div>
        <div className="row">
          <BrowserRouter>
            <Header></Header>
          </BrowserRouter>
          <div className="Services">
            <br></br>
            <br></br>
            <br></br>
          </div>
          <div className="row">
            <h1 className="text-center title">Our Services</h1>
            <p className="p-3 text-left">
              Quickly get help for your issue by selcting the service that
              matches your issues. You can always describe your issue if it does
              not match any of our services and you only pay when the issue has
              been resolved.
            </p>
            <hr></hr>
            {services}
          </div>
        </div>
        <BrowserRouter>
          <Footer></Footer>
        </BrowserRouter>
      </div>
    );
  }
}

export default Services;

1 Ответ

0 голосов
/ 04 мая 2020 
import React from "react";
import { BrowserRouter } from "react-router-dom";
import axios from "axios";

class Services extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(response => {
      console.log(response);
      this.setState({ data: response.data });
    });
  }

  render() {
    let services_data = [];

    this.state.data.forEach((res, i) => {
      services_data.push(
        <ul key={res.i}>
          <li>{res.id}</li>
          <li>{res.title}</li>
          <li>{res.body}</li>
        </ul>
      );
    });

    return (
      <div>
        <div className="row">
          <BrowserRouter>Header</BrowserRouter>
          <div className="Services" />
          <div className="row">
            <h1 className="text-center title">Our Services</h1>
            <p className="p-3 text-left">
              Quickly get help for your issue by selcting the service that
              matches your issues. You can always describe your issue if it does
              not match any of our services and you only pay when the issue has
              been resolved.
            </p>
            <hr />
            {services_data}
          </div>
        </div>
        <BrowserRouter>Footer</BrowserRouter>
      </div>
    );
  }
}

export default Services;

Приведенный выше код работает нормально и разделяет метод следующим образом.

...