Question

我是新来的反应者，已经尝试了很长时间，但没有成功。也许有人可以浏览并确定我正在雾化。这是我的代码。我有一个App.js文件，其中有一个指向服务页面的路由，我想在该页面上完成并显示来自带有react和JSX的mysql数据库中的服务的数据div。

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;

Answer 1

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;

上面的代码运行正常，并像这样拆分方法。

使用React获取和显示数据

1 个答案: