如何在.map中获取整个数组？答案

【问题标题】：How to get whole array in .map?如何在.map中获取整个数组？
【发布时间】：2020-12-27 01:40:59
【问题描述】：

我对 React/JSX 及其语法完全陌生。

export const productList = [
    
    {
    id: 'ckes849yz000101md82djen90',
    producer: 'Producent A',
    title: 'Gulerødder',
    type: 'Vaskede',
    image: 'https://raahandel.dk/wp-content/uploads/2019/09/DSC07878.jpg',
    category: 'Frugt & Grønt',
    organic: true,
    cold: false,
    unit: 'kg',
    unitSize: 1,
    bulkUnit: 'Kasse',
    bulkSize: 10,
    price: 8.75,
    quantity: 100,

    descriptions: [{
        productDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        goodBecause: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    }],

}]

我在 1 个数组中有 5 个这样的对象，我想在我的 App.js 中通过 .map()

class App extends React.Component {


  render() {

    return (
      <div>
        <h1>Produkt liste</h1>
        {
          productList.map((product) =>
            <div>
              {product.id}
            </div>
          )
        }
      </div>
    );
  }
}

导出默认应用；

到目前为止，我只知道如何获取单个值..

谢谢。

【问题讨论】：

看起来不错（除了缺少key，但这不会阻止任何工作，您的 ID 应该可以作为键正常工作）。如果数组中有 5 个对象，您将获得 5 个 div。
谢谢你，罗宾。但是如何用它们的值写出所有 5 个对象呢？
“如何用它们的值写入所有 5 个对象”：取决于预期的输出格式。您当然可以使用JSON.stringify(product) 以 JSON 格式转储整个对象。或者以其他方式迭代对象条目（使用Object.entries(product).map ....）
您的代码看起来像 codesandbox.io/s/festive-mclean-hbtkn 一样工作。我会检查你的清单是否真的包含 5 个项目。如果您要问的是如何从该对象中获取比 id 更多的信息，您只需使用点符号访问它（例如 product.title）。
当然是——只要把{product.producer}也放在那里。如何格式化 HTML 以使信息以您想要的方式显示完全取决于您。（当然你也可以使用 CSS。）

标签： javascript arrays reactjs object jsx

【解决方案1】：

回答你刚才问丹尼尔的问题，如果我理解你的要求是否正确，你可以做 {product.id} {product.producer}

【讨论】：