javascript - 如何在react.js组件中通过表格显示json数据

Question

我尝试将从数据库检索到的 json 数据显示为我的 React 组件中的表。我正在使用 axios 从我的 Express 服务器发布和获取数据。这是我的 react 组件。

import React from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import Table from "components/Table/Table.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardBody from "components/Card/CardBody.jsx";

import Button from "components/CustomButtons/Button.jsx";
import CardFooter from "components/Card/CardFooter.jsx";

import axios from "axios";

const styles = {
  cardCategoryWhite: {
    "&,& a,& a:hover,& a:focus": {
      color: "rgba(255,255,255,.62)",
      margin: "0",
      fontSize: "14px",
      marginTop: "0",
      marginBottom: "0"
    },
    "& a,& a:hover,& a:focus": {
      color: "#FFFFFF"
    }
  },
  cardTitleWhite: {
    color: "#FFFFFF",
    marginTop: "0px",
    minHeight: "auto",
    fontWeight: "300",
    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
    marginBottom: "3px",
    textDecoration: "none",
    "& small": {
      color: "#777",
      fontSize: "65%",
      fontWeight: "400",
      lineHeight: "1"
    }
  }
};


function createUser() {
  axios.post("http://172.104.189.215:4000/users").then(response => {console.log(response)}).catch(error => {console.log(error.response)});
}

function TableList(props) {


  axios.get("http://172.104.189.215:4000/readUsers").then(json => console.log(json)).catch(err => console.log(err));;


  return (
    <GridContainer>
      <GridItem xs={12} sm={12} md={12}>
        <Button color="primary" onClick={createUser}>Create User</Button>
        <Card>
          <CardHeader color="primary">
            <h4 className={classes.cardTitleWhite}>User List</h4>
            <p className={classes.cardCategoryWhite}>
              {/*Here is a subtitle for this table*/}
            </p>
          </CardHeader>
          <CardBody>
            <Table
              tableHeaderColor="primary"
              tableHead={["Name", "Country", "City", "Salary"]}
              tableData={[
                ["Dakota Rice", "Niger", "Oud-Turnhout", "$36,738"],
                ["Minerva Hooper", "Curaçao", "Sinaai-Waas", "$23,789"],
                ["Sage Rodriguez", "Netherlands", "Baileux", "$56,142"],
                ["Philip Chaney", "Korea, South", "Overland Park", "$38,735"],
                ["Doris Greene", "Malawi", "Feldkirchen in Kärnten", "$63,542"],
                ["Mason Porter", "Chile", "Gloucester", "$78,615"],
                ["LALA", "NOOB", "LOL", "$12345"]
              ]}
            />
          </CardBody>
          <CardFooter>
            <Button color="primary">Update Profile</Button>
          </CardFooter>
        </Card>
      </GridItem>
    </GridContainer>
  );
}

export default withStyles(styles)(TableList);

我成功从数据库检索数据并显示在我的控制台中。但是，我不知道如何通过表格显示它。有人对这个问题有好的解决方案吗？

Answer 1

更好的方法是为表格创建一个单独的组件来显示您从后端接收的数据。否则，您可以通过以下方式进行一些更改来使用相同的组件:

        class TableList extends React.Component {
          constructor() {
            super();
            this.state = {
              users: []
            };
          }
          
          function createUser() {
            axios.post("http://172.104.189.215:4000/users").then(response => { 
              console.log(response)}).catch(error => {console.log(error.response)});
            });
          }
          componentDidMount() {
            axios.get("https://pokeapi.co/api/v2/pokemon/ditto/")
              .then(json => {
                this.setState({users: json});
                console.log({json})
              });
              .catch(err => console.log(err));;
          }
          render() {
            const {users} = this.state;
            console.log({users})
            // your table
            return (
              <GridContainer>
                <GridItem xs={12} sm={12} md={12}>
                  <Button color="primary" onClick={createUser}>Create User</Button>
                  <Card>
                    <CardHeader color="primary">
                      <h4 className={classes.cardTitleWhite}>User List</h4>
                      <p className={classes.cardCategoryWhite}>
                        {/*Here is a subtitle for this table*/}
                      </p>
                    </CardHeader>
                    <CardBody>
                      <Table
                        tableHeaderColor="primary"
                        tableHead={["Name", "Country", "City", "Salary"]}
                        tableData={users}
                      />
                    </CardBody>
                    <CardFooter>
                      <Button color="primary">Update Profile</Button>
                    </CardFooter>
                  </Card>
                </GridItem>
              </GridContainer>
            );
          }
        }

        const styles = {
          cardCategoryWhite: {
            "&,& a,& a:hover,& a:focus": {
              color: "rgba(255,255,255,.62)",
              margin: "0",
              fontSize: "14px",
              marginTop: "0",
              marginBottom: "0"
            },
            "& a,& a:hover,& a:focus": {
              color: "#FFFFFF"
            }
          },
          cardTitleWhite: {
            color: "#FFFFFF",
            marginTop: "0px",
            minHeight: "auto",
            fontWeight: "300",
            fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
            marginBottom: "3px",
            textDecoration: "none",
            "& small": {
              color: "#777",
              fontSize: "65%",
              fontWeight: "400",
              lineHeight: "1"
            }
          }
        };