有人可以解释为什么这个反应组件没有输出图像或正确的关键道具吗？

Question

PNG 图像本地保存在我的机器上并导入到这个 React 组件中。他们没有加载到页面上。我也遇到了关键道具错误。当我从正常的 Rest API 中拉出时，关键道具解决方案正在工作。当我试图引用我自己的数组时它停止工作。图像 src 显示“[Object Object]”而不是我期望的图像源。

import React from 'react';
import basketball from '../img/basketball.png';
import bike from '../img/bike.png';
import boxing from '../img/boxing.png';

function ExerciseIcons() {
  return (
    [
      {
        name: "bike",
        id: "1",
        image: <img src={bike} />
      },
      {
        name: "basketball",
        id: "2",
        image: {basketball}
      },
      {
        name: "boxing",
        id: "3",
        image: {boxing}
      },
    ].map(item => (
      <ul>
        <li key={item.id}> <img src={item.image} /></li>
      </ul>
    ))
  )
}

export default ExerciseIcons;

Here is what the output looks like

Answer 1

你的阵列有一些问题。 basketball 和 boxing 周围有 {}，这是对象语法。所以 image 键的值实际上类似于 { basketball: basketball }。这就是它显示“[Object Object]”的原因。 bike 是完整的 JSX 元素，不是图片源。

您需要将其更改为：

[
  {
    name: "bike",
    id: "1",
    image: bike
  },
  {
    name: "basketball",
    id: "2",
    image: basketball
  },
  {
    name: "boxing",
    id: "3",
    image: boxing
 },
]

记住： {} 在 JSX 中是用于计算 JavaScript 表达式的语法。在 JSX 之外，这是对象表示法。

key 的问题是您将它提供给了错误的元素。密钥必须提供给映射函数内的 root 元素。我在这种情况下是 ul（尽管我想知道这是否真的是您想要的，它会为每个项目创建一个新列表）。

有人可以解释为什么这个反应组件没有输出图像或正确的关键道具吗？

Can someone explain why this react component is not outputting the images or the correct key prop?

prop

reactjs

array.prototype.map