Как отобразить данные json через таблицу в компоненте Reaction.js

Question

Я попытался отобразить данные json, полученные из базы данных, в виде таблицы в моем компоненте реакции. Я использую Axios для публикации и получения данных с моего экспресс-сервера. Это мой реактивный компонент.

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"
            }
          }
        };

Answer 2

когда вы получаете данные User из API, установите их для состояния пользователей.И Component TableList заполняет данные от пользователей состояния.Поэтому TableList должен записываться как класс Component.

class TableList extends React.Component {
  constructor() {
    super();
    this.state = {
      users: []
    };
  }
  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
  }
}

Answer 3

В этом посте есть несколько моментов.ИМХО, похоже, вы жестко закодировали данные для таблицы.Это работает?Действительно ли ваша таблица ожидает объект, содержащий массив, который затем содержит массив данных столбца?

Как говорит Ланковова, нам нужно увидеть компонент таблицы, чтобы понять, как данные, которые вы передаете вКомпонент будет обработан.

Вы должны вернуться к структуре данных здесь, так как вы обычно ожидаете один массив объектов JSON, а не то, что у вас есть в вашем примере.

В его нынешнем виде,данные ответов API никогда не попадут в таблицу, так как единственное, что вы делаете с данными, - регистрируете их на консоли или это ваш ключевой вопрос?