Javascript 如何在array React/Axios中拆分结果

今天我将向大家解释我的问题：以下代码工作正常，我得到了我的数据库，然后我使用了映射函数，所以一切都很好。我的问题和下一个，我得到一个表在其中我有一个对象，其中包含一个数组。此表的格式如下：

 [{"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 

import React，{Component}来自'React'；
从“reactstrap”导入{CardText，Col}；
从“axios”导入axios
const entrypoint=process.env.REACT_APP_API_entrypoint+'/API'；
类AdminPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
},
};
}
getRandom=async（）=>{
const res=等待axios.get(
入口点+“/alluserpls”
)
this.setState（{data:res.data}）
}
componentDidMount（）{
这个是getRandom（）
}
render（）{
让datas=this.state.data.map（datas=>{
返回(
当您想从服务器获取数据时，它是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>
    )
 })

let data=this.state.data.map（（数据，索引）=>{
返回(
尝试调试并查看datass.items和datass.id中的确切内容。您可能需要访问datass.items[0]和datass.items[1]，但这只是一个有根据的猜测{datass.title}将显示每个中方命令{datass.title}的标题，如下所示mean@bwright{“id”：118，“title”：“brand”，“items”：“[{\“title\”：\”Lagunitas IPA（Demi Pinte\，\“quantity\”：2}]“}@PramodNikam我不能命令{datass.title}，因为在我的表上我有“title”，对于内部命令{}，如果我只想为“items”取“quantity”，代码是什么？让datas=this.state.data.map（datass=>{return（我有错误，Uncaught）（承诺中）TypeError:t.json不是生成器中l（runtime.js:45）处AdminPage.js:82处的函数。\在生成器中调用（runtime.js:264）。在r（asyncToGenerator.js:3）处调用（runtime.js:98）在u（asyncToGenerator.js:25）处调用数量字符串或数量？此模式“项”：“[{”title\：\：\“Lagunitas IPA（Demi Pinte\，\，\”：2}”字符串也是如此，我猜我得到了错误AdminPage.js:83未捕获（承诺中）SyntaxError:JSON中的意外标记o位于JSON.parse（）的位置1你需要考虑一下你在RES中得到的数据是否是JSON……上面提到的数据U是准确的。嗨，我想问题和我都在同一张表中。你觉得呢？我的表看起来像是精确的{“ID”：118，“名字”：“”，“电话”：“1643416502”，“随机化”：“456”。“标题”，“数量”：“物品”：“[{”标题\“：\“Lagunitas IPA（Demi Pinte）”，“数量\“：2}]”我真的想恢复两部分的物品{”id“：118，“名称”：“，”电话“：”1643416502“，”随机id“：”456“，”标题“，”数量“：”，“物品”：“[{”标题\“：“Lagunitas IPA（Demi Pinte）”，”数量“：2}”也在json中，您应该能够解析它，您可以在控制台中检查它是否是您在res.data中接收的确切数据
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>
    )
 })