如何在数组 React/Axios 中拆分结果

Question

我今天将向您解释我的问题：以下代码可以正常工作，我得到了我的数据库，然后我使用了一个 map 函数，所以一切都很好。我的问题和下一个问题是，我在其中得到一个表，我有一个包含数组的对象。该表具有以下形式：

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

并且可以恢复两个数据之一，因为当我映射数组时，我得到了所有数据。

你知道如何解决这个问题吗？

    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 

Answer 1

    getRandom = async () => {
            const res = await axios.get(
                entrypoint + "/alluserpls"
            )
            const data = res.json();
            this.setState({ data })
        }

Answer 2

当你想从服务器获取数据时，它是 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>
    )
 })

这将分别显示数量和标题的值。