как разделить результат в массиве React / Axios - PullRequest
Новая
       4

как разделить результат в массиве React / Axios

0 голосов
/ 07 февраля 2020

Сегодня я объясню вашу проблему: следующий код работает нормально, я получаю свою базу данных, затем я использую функцию карты, так что все в порядке. Мой вопрос и следующий, я получаю таблицу в нем у меня есть объект, который содержит массив. Эта таблица имеет вид есть идеи как это исправить? 

    import React, { Component } from 'react';
    import { CardText,  Col } from 'reactstrap';
    import axios from 'axios'

    const entrypoint = process.env.REACT_APP_API_ENTRYPOINT+'/api';

    class AdminPage  extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],   
              },
        };
    }

    getRandom = async () => {

        const res = await axios.get(
            entrypoint + "/alluserpls"
        )
        this.setState({ data: res.data })
    }
    componentDidMount() {
        this.getRandom()
    }
    render() {

        let datas = this.state.data.map(datass => {
          return (
              <div >
                  <Col sm="12" key={datass.id}">
                          <CardText> Commande{datass.items}</CardText>
                  </Col>
              </div>
          )
      })
        return (
        <div> 
        {datas}
      </div>
        )
     }
   }

export default AdminPage

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

когда вы хотите получить данные с сервера, они имеют формат json, поэтому они могут передаваться с сервера на клиент. поэтому, когда вы получаете на стороне клиента, обязательно проанализируйте его, это вернет вам данные в форму объекта, которую вы можете использовать для сопоставления каждого свойства ваших данных.

давайте предположим, что вы получаете эти данные 

 [{"title":"Lagunitas IPA (Demi-Pinte","quantity":2}]

эти данные в формате json, теперь вам нужно проанализировать их, чтобы иметь возможность отдельно использовать свойства

в вашем методе getRandom 

getRandom = async () => {

   const res = await axios.get(
      entrypoint + "/alluserpls"
   )
   let parsedData = JSON.parse(res.data);
   this.setState({ data: parsedData  })
}

теперь у вас есть данные, хранящиеся в виде массива объектов, при рендеринге вы можете отобразить их и использовать как 

let datas = this.state.data.map((datass,index) => {
    return (
       <div>
           <Col sm="12" key={index}">
               <Col sm="6">
               Title : {datass.title}
               </Col>
               <Col sm="6">
               Quantity: {datass.quantity}
               </Col>
           </Col>
       </div>
    )
 })

, это покажет значение количества и заголовка отдельно.

0 голосов
/ 07 февраля 2020 
    getRandom = async () => {
            const res = await axios.get(
                entrypoint + "/alluserpls"
            )
            const data = res.json();
            this.setState({ data })
        }
...