Javascript 迭代嵌套数组中的值

在react应用程序中迭代嵌套数组的值时出现问题

我希望输出像这样“

请检查我的代码沙盒在这里

{results.map（（数据，索引）=>(


{data[“key”]}


))}

您需要像这样修复

salary.jsx

。要获得正确的密钥，您必须使用

Object.keys（data）[1]

而不是

data[“key”]

从“React”导入React；
固定工资=（）=>{
常数结果=[
{
ID:“商店”，
购物：[
{ID:“食品.订单”，名称：“食品”}，
{ID:“饮料.订单”，名称：“饮料”}
]
},
{
ID:“乐趣”，
体育：[
{ID:“打篮球”，名字：“篮球”}，
{ID:“play.soccer”，名称：“soccer”}
]
}
];
常量格式=（数据）=>{
const key=Object.keys（数据）[1]；
常量文本=数据[键]。减少（（上一个，当前）=>{
返回上一个+''+当前名称；
}, '')
返回键+文本；
}
返回(
{results.map（（数据）=>(


{格式（数据）}


))}
);
};
导出默认薪资；

你在找这样的东西吗

import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Shopping: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Sports: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];

  return (
    <div>
      <ul>
        {results.map((data, i) =>
          Object.keys(data)
            .filter((x) => Array.isArray(data[x]))
            .map((key) => (
              <div key={data.ID}>
                <li>{key}</li>
                <ul>
                  {data[key].map((item) => (
                    <li key={item.ID}>{item.Name}</li>
                  ))}
                </ul>
              </div>
            ))
        )}
      </ul>
    </div>
  );
};

export default Salary;

从“React”导入React；
固定工资=（）=>{
常数结果=[
{
ID:“商店”，
购物：[
{ID:“食品.订单”，名称：“食品”}，
{ID:“饮料.订单”，名称：“饮料”}
]
},
{
ID:“乐趣”，
体育：[
{ID:“打篮球”，名字：“篮球”}，
{ID:“play.soccer”，名称：“soccer”}
]
}
];
返回(

{results.map（（数据，i）=>
对象。键（数据）
.filter（（x）=>Array.isArray（数据[x]））
.map（（键）=>(
{key}

{data[key].map（（项）=>(
{item.Name}
))}

))
)}

);
};
导出默认薪资；

我认为您在迭代

结果时遇到问题的原因是它的状态不好：
如果可以，请尝试以下操作：

import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Name: "Shopping",
      subs: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Name: "Sports",
      subs: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];

  return (
    <div>
      {results.map((data, index) => (
        <ul key={data.ID}>
          <li>
            <div>{data.Name}</div>
            {data.subs.length &&
              data.subs.map((innerData) => (
                <ul key={innerData.ID}>
                  <li>
                    <div>{innerData.Name}</div>
                  </li>
                </ul>
              ))}
          </li>
        </ul>
      ))}
    </div>
  );
};

export default Salary;

从“React”导入React；
固定工资=（）=>{
常数结果=[
{
ID:“商店”，
名称：“购物”，
潜艇：[
{ID:“食品.订单”，名称：“食品”}，
{ID:“饮料.订单”，名称：“饮料”}
]
},
{
ID:“乐趣”，
名称：“运动”，
潜艇：[
{ID:“打篮球”，名字：“篮球”}，
{ID:“play.soccer”，名称：“soccer”}
]
}
];
返回(
{results.map（（数据，索引）=>(


{data.Name}
{data.subs.length&&
data.subs.map（（innerData）=>(


{innerData.Name}


))}


))}
);
};
导出默认薪资；
检查此代码段。使用嵌套的
映射
并为所有
li


const Salary=（）=>{
常数结果=[
{
ID:“商店”，
购物：[
{ID:“食品.订单”，名称：“食品”}，
{ID:“饮料.订单”，名称：“饮料”}
]
},
{
ID:“乐趣”，
体育：[
{ID:“打篮球”，名字：“篮球”}，
{ID:“play.soccer”，名称：“soccer”}
]
}
];
返回(

{results.map（（数据）=>(

{data.ID}

{（data.Sports | | data.Shopping）.map（（项目）=>(
{item.Name}
))}


))}

);
};
ReactDOM.render（，document.querySelector（'#app'））

你能解释得更清楚些吗。我看过你的代码，但仍然很混乱。
结果
是一个对象数组。当你映射结果数组时，你会在
数据
变量中得到对象。但是在你的数据对象中没有名为
键
@NikhilPonduri的键。我已经编辑了我的问题
import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Shopping: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Sports: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];
  
  const format = (data) => {
    const key = Object.keys(data)[1];
    const text = data[key].reduce((prev, cur) => {
      return prev + ' ' + cur.Name;
    }, '')
    return key + text;
  }
  return (
    <div>
      {results.map((data) => (
        <ul>
          <li>
            <div> {format(data)} </div>
          </li>
        </ul>
      ))}
    </div>
  );
};

export default Salary;

import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Shopping: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Sports: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];

  return (
    <div>
      <ul>
        {results.map((data, i) =>
          Object.keys(data)
            .filter((x) => Array.isArray(data[x]))
            .map((key) => (
              <div key={data.ID}>
                <li>{key}</li>
                <ul>
                  {data[key].map((item) => (
                    <li key={item.ID}>{item.Name}</li>
                  ))}
                </ul>
              </div>
            ))
        )}
      </ul>
    </div>
  );
};

export default Salary;


import React from "react";

const Salary = () => {
  const results = [
    {
      ID: "shops",
      Name: "Shopping",
      subs: [
        { ID: "food.order", Name: "Food" },
        { ID: "drink.order", Name: "Drink" }
      ]
    },
    {
      ID: "fun",
      Name: "Sports",
      subs: [
        { ID: "play.basketball", Name: "Basketball" },
        { ID: "play.soccer", Name: "Soccer" }
      ]
    }
  ];

  return (
    <div>
      {results.map((data, index) => (
        <ul key={data.ID}>
          <li>
            <div>{data.Name}</div>
            {data.subs.length &&
              data.subs.map((innerData) => (
                <ul key={innerData.ID}>
                  <li>
                    <div>{innerData.Name}</div>
                  </li>
                </ul>
              ))}
          </li>
        </ul>
      ))}
    </div>
  );
};

export default Salary;