Javascript 对象数组映射for/foreach循环中的值以打印JSX

此对象包含-->数组-->对象。使用for/foreach或其他方法，我需要迭代表中的行。这是React JSX代码。有人能帮我明白该怎么办吗

a:{
 bb: [{}],
 cc: [{}],
 dd: [{}]
}

我需要使用动态“键”迭代对象“a”，并使用嵌套对象中的属性在表中呈现JSX行代码。

render() {
    const {
      data: {
        drivers: { user, month, year, createdAt },
      },
    } = this.props;

let DriverCommissionResults = {};
let recent = "";
let combinedUser = {};

DriverCommissionResults = {
   "Jane": 200,
   "Ann": 100,
   "Kevin": 50,

}

for (const [key, value] of Object.entries(DriverCommissionResults)) {
        combinedUser[`${key}`] = user.reduce(function (filtered, option) {
          if (option.username === key) {
            var someNewValue = {
              userId: option.userId,
              username: option.username,
              createdAt: option.createdAt,
              ranking: option.ranking,
              year: option.year,
              month: option.month,
              handle: option.handle,
              initialSalary: option.initialSalary,
              salary: option.salary,
              drunkenPesentage: option.drunkenPesentage,
              newTotalCommission: value,
            };
            filtered.push(someNewValue);
          }
          return filtered;
        }, []);
      }

      for (const [key, value] of Object.entries(DriverCommissionResults)) {
        recent = combinedUser[`${key}`].map((filteredPerson) => (
          <RowComponent
            newSalary={filteredPerson.initialSalary}
            key={filteredPerson.userId}
            member={filteredPerson}
            card={cardMode}
            newTotalCommission={filteredPerson.newTotalCommission}
          />
        ));
      }

return (
  <Fragment>
    <table>
      <thead>
        <tr>
          <th>Handle</th>
          <th>InitialSalary</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>{recent}</tbody>
    </table>
  </Fragment>
}

输出

处理初始薪资

凯文3000030100

预期产出

处理初始薪资

简40000 40100

安50000 50100

---

Kevin 30000 30100

变量

recent

在

for

循环中被覆盖。 试试这个

const recent = []
for (const [key, value] of Object.entries(DriverCommissionResults)) {
    combinedUser[`${key}`].forEach((filteredPerson) => (
      recent.push(<RowComponent
            newSalary={filteredPerson.initialSalary}
            key={filteredPerson.userId}
            member={filteredPerson}
            card={cardMode}
            newTotalCommission={filteredPerson.newTotalCommission}
         />);
    ));
}

const-recent=[]
for（Object.entries（DriverCommissionResults））的常量[key，value]{
combinedUser[`${key}`].forEach（（filteredPerson）=>(
最近的push（）；
));
}

我认为您可以构建如下项目，并在渲染中使用它

const obj = {
  Jane: [
    { handle: "Jane", username: "Jane", salary: 40000, initialSalary: 40100 },
  ],
  Ann: [
    { handle: "Ann", username: "Ann", salary: 50000, initialSalary: 50100 },
  ],
  Kevin: [
    { handle: "Kevin", username: "Kevin", salary: 30000, initialSalary: 30100 },
  ],
};

const items = Object.values(obj).map(([rowObj]) => {
  return (
    <div key={rowObj.handle}>
      {Object.entries(rowObj)
        .filter(([key]) =>
          ["username", "salary", "initialSalary"].includes(key)
        )
        .map(([key, value]) => (
          <div key={key}> {value} </div>
        ))}
    </div>
  );
});

const obj={
简：[
{句柄：“Jane”，用户名：“Jane”，工资：40000，起首工资：40100}，
],
安：[
{句柄：“安”，用户名：“安”，工资：50000，起首工资：50100}，
],
凯文：[
{句柄：“凯文”，用户名：“凯文”，工资：30000，起首工资：30100}，
],
};
const items=Object.values（obj.map）（[rowObj]）=>{
返回(
{Object.entries（rowObj）
.filter（（[key]）=>
[“用户名”、“薪资”、“初始薪资”]。包括（键）
)
.map（[key，value]）=>(
{value}
))}
);
});

const obj = {
  Jane: [
    { handle: "Jane", username: "Jane", salary: 40000, initialSalary: 40100 },
  ],
  Ann: [
    { handle: "Ann", username: "Ann", salary: 50000, initialSalary: 50100 },
  ],
  Kevin: [
    { handle: "Kevin", username: "Kevin", salary: 30000, initialSalary: 30100 },
  ],
};

const items = Object.values(obj).map(([rowObj]) => {
  return (
    <div key={rowObj.handle}>
      {Object.entries(rowObj)
        .filter(([key]) =>
          ["username", "salary", "initialSalary"].includes(key)
        )
        .map(([key, value]) => (
          <div key={key}> {value} </div>
        ))}
    </div>
  );
});