列表中的渲染列表（在Map中使用Map）

Question

我想在JSX中呈现列表中的某些列表。记录数组

 const [records, setRecords] = useState([
    {
      name: "Jack",
      record: {
        record_1: { credit: 10, debit: 0, total: 10 },
        record_2: { credit: 10, debit: 0, total: 20 }
      }
    }
  ]);

我如何呈现name，包含record_1和record_2

的记录列表

我想要的是

Answer 1

使用0

Object.values

摘要：

records.map(value =>
  Object.values(value.record).map(record => <div>
    name: {value.name} {' '}
    credit: {record.credit} {' '}
    debt: {record.debit} {' '}
    total: {record.total}
  <div>)
);

const Comp = () => {
  const [records, setRecords] = React.useState([
    {
      name: "Jack",
      record: {
        record_1: { credit: 10, debit: 0, total: 10 },
        record_2: { credit: 10, debit: 0, total: 20 }
      }
    }
  ]);

  return records.map(value =>
    Object.values(value.record).map(record => <div>
      name: {value.name} {' '}
      credit: {record.credit} {' '}
      debt: {record.debit} {' '}
      total: {record.total}
    </div>)
  );
};

ReactDOM.render(
  <Comp />,
  document.getElementById("react")
);