Question

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

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

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;

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

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

使用数组值渲染对象

1 个答案: