渲染具有数组值的对象[重复]答案

【问题标题】：Rendering an object with array value [duplicate]渲染具有数组值的对象[重复]
【发布时间】：2021-08-22 17:13:26
【问题描述】：

我正在尝试使用数组的键值及其值在我的页面上呈现复选框（最后的目标是选择键值，并且将选择所有值）。

我现在的问题是，当我试图只渲染所有这些值时，它根本不是。代码示例：

import React from "react";
import "./SelectMasekhtot.css";

let fakeData = {
  book1: [1, 2, 3, 4, 5],
  book2: [1, 2, 3, 4, 5],
  book3: [1, 2, 3, 4, 5],
  book4: [1, 2, 3, 4, 5],
};

const SelectMasekhtot = () => {
  return (
    <div className='containerSelectMasekhtot'>
      <h1>selection part</h1>
      <div>
        {Object.entries(fakeData).forEach(([key, value]) => (
          <li>
            <span className='input-label'>{key}</span>
            <span className='input-label'>{value}</span>
          </li>
        ))}
      </div>
    </div>
  );
};
export default SelectMasekhtot;

我不明白为什么它看起来如此简单而且根本无法渲染。我创建了一个函数来控制台记录结果，我得到它们它根本没有呈现。

【问题讨论】：

您需要使用map 而不是forEach。 forEach 不返回任何内容。
请参阅 React 文档中的 Lists and Keys。

标签： javascript html reactjs

【解决方案1】：

使用map 代替forEach。您的代码已修复：

let fakeData = {
  book1: [1, 2, 3, 4, 5],
  book2: [1, 2, 3, 4, 5],
  book3: [1, 2, 3, 4, 5],
  book4: [1, 2, 3, 4, 5],
};

const SelectMasekhtot = () => {
  return (
    <div className='containerSelectMasekhtot'>
      <h1>selection part</h1>
      <div>
        {Object.entries(fakeData).map(([key, value]) => (
          <li>
            <span className='input-label'>{key}</span>
            <span className='input-label'>{value}</span>
          </li>
        ))}
      </div>
    </div>
  );
};

ReactDOM.render(<SelectMasekhtot />, document.getElementById('root'));

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

<div id="root"></div>

【讨论】：