对象数组在 for/foreach 循环内映射值以打印 JSX答案

【问题标题】：Object Arrays map values inside for/foreach loop to print the JSX对象数组在 for/foreach 循环内映射值以打印 JSX
【发布时间】：2020-11-21 06:50:20
【问题描述】：

此对象包含 --> 数组 --> 对象。使用 for/foreach 或其他方法我需要迭代表中的 ROW。这是 React JSX 代码。有人可以帮我理解该怎么做吗？

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

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

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>
}

console.log(combinedUser);

{Jane: Array(1), Ann: Array(1), Kevin: Array(1)}

{
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,}],
}

输出

处理 InitialSalary Salary

凯文 30000 30100

预期输出

处理 InitialSalary Salary

简 40000 40100

安50000 50100

凯文 30000 30100

【问题讨论】：

标签： javascript arrays reactjs object jsx

【解决方案1】：

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

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>
  );
});

【讨论】：

【解决方案2】：

变量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}
         />);
    ));
}

【讨论】：