遍历对象并呈现数据

Question

我正在构建一个运动应用程序。我该如何迭代这个对象的属性"suoritusStats“，这样我就可以用”suoritusStats- toistot - toistot - toistot“的方式呈现"painot”，所以在这种情况下，“painot”属性将呈现为"0-0-10"，并依次呈现"10-10-10“。

目前，从最后一个map函数开始，我只渲染了一次"10“，但如上所述，我需要以描述的方式渲染它们。所以"toistot“应该是"toistot: 10-10- 10”，而不是"toistot: 10“。

这是我的数据结构(它是一个对象数组)，但我刚刚删减了，这样它就不会太长了。

Array [
  Object {
    "pvm": "3. heinäkuuta 2021",
    "timestamp": 1625325753617,
    "treeni": "Rintatreeni",
    "treeniData": Object {
      "Punnerrukset": Object {
        "id": 0,
        "nimi": "Punnerrukset",
        "sarjat": "3",
        "suoritusStats": Array [
          Object {
            "painot": "0",
            "toistot": "10",
          },
          Object {
            "painot": "0",
            "toistot": "10",
          },
          Object {
            "painot": "10",
            "toistot": "10",
          },
        ],
      },
    },
  },
]

下面是我的返回语句：

 {
   treenit.map((item, index) => (
    
        
    <List.Accordion 
    key={index}
    title={<Text small left>{item.pvm} - {item.treeni}</Text>}
    left={props => <List.Icon {...props} icon="calendar" color={themeColor} />}
    >
 {
       Object.values(item.treeniData).map(treeni => {
        let descSarjat = `Sarjat: ${treeni.sarjat}`;
           let descToistot;
           let descPainot;

            Object.values(treeni.suoritusStats).map((item) => {
                descToistot = `Toistot: ${item.toistot}`;
                descPainot = `Painot: ${item.painot}`;
            
            })

           return(
            <List.Item 
            descriptionNumberOfLines={3}
            descriptionStyle={{fontFamily: 'MontserratRegular', color: themeColor}}
            titleStyle={{fontFamily: 'MontserratSemiBold', color: themeColor}}
            key={treeni.nimi} title={treeni.nimi} 
            description={`${descSarjat}\n${descToistot}\n${descPainot}`} 
            />
           ) 
           
       })
   }
 
   </List.Accordion>
       
 ))
 }

提前感谢您抽出时间来！非常感谢。

Answer 1

试试这个：

let descToistot =`Toistot: `;
let descPainot= `Painot: `;

treeni.suoritusStats.map((item, i) => {
   descToistot += `${i===0?"":"-"}${item.toistot}`;
   descPainot += `${i===0?"":"-"}${item.painot}`;
})

Answer 2

如果我很好地理解你，这是纯JS。与React无关。

​

const arr= [
  {
    "pvm": "3. heinäkuuta 2021",
    "timestamp": 1625325753617,
    "treeni": "Rintatreeni",
    "treeniData":  {
      "Punnerrukset":  {
        "id": 0,
        "nimi": "Punnerrukset",
        "sarjat": "3",
        "suoritusStats":  [
           {
            "painot": "0",
            "toistot": "10",
          },
           {
            "painot": "0",
            "toistot": "10",
          },
           {
            "painot": "10",
            "toistot": "10",
          },
        ],
      },
    },
  },
]

const datas = arr[0].treeniData.Punnerrukset.suoritusStats;
const toistotArr = [];

datas.map(data => toistotArr.push(data.toistot));
const dashedResult = toistotArr.join('-');
console.log(dashedResult);

​

Answer 3

下面是同样的解决方案：

​

Array.map(({ treeniData = {} }) => {
      const { Punnerrukset = {} } = treeniData;
      const obj = {};
      Object.keys(Punnerrukset).forEach((punnKey) => {
        const punnerValue = Punnerrukset[punnKey];
        if (Array.isArray(punnerValue)) {
          punnerValue.forEach((suorKeys) => {
            Object.keys(suorKeys).forEach((val) => {
              if (obj[val]) {
                obj[val] += "-" + suorKeys[val];
              } else {
                obj[val] = val + ":";
                obj[val] += suorKeys[val];
              }
            });
          });
        } else if (punnKey === "sarjat") {
          obj[punnKey] = punnKey + ":" + punnerValue;
        } else {
          obj[punnKey] = punnerValue;
        }
      });
      const { painot = "", sarjat = "", toistot = "" } = obj;
      return (
        <div>
          {`${sarjat}\n ${painot}\n ${toistot}\n`}
        </div>
      );
    });

​