javascript - 列表内渲染列表（使用地图内的地图）

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_1record_2

我想要的是

Answer 1

采用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")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>