Javascript 无法解决：将对象数组映射到按钮元素（React）

因此，我在使用map方法创建一组按钮时遇到了困难。我所做的是创建一个带有按钮id、src等的对象数组，并希望将该数组映射到我的按钮上

它不断告诉变量未定义并抛出错误。任何帮助都将不胜感激

以下是我目前的代码：

import React from "react";
import ReactDom from "react-dom";

const sounds = [
  {
    idnum: "1",
    id: "Q",
    src: "1.html",
  },
  {
    idnum: "1",
    id: "W",
    src: "",
  },
  {
    idnum: "1",
    id: "E",
    src: "",
  },
  {
    idnum: "1",
    id: "A",
    src: "",
  },
  {
    idnum: "1",
    id: "S",
    src: "",
  },
  {
    idnum: "1",
    id: "D",
    src: "",
  },
  {
    idnum: "1",
    id: "Z",
    src: "",
  },
  {
    idnum: "1",
    id: "X",
    src: "",
  },
  {
    idnum: "1",
    id: "C",
    src: "",
  },
];

class Button extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const buttonData = this.sounds.map((info) => (
      <button>
        {info[id]}+{info[idnum]}
      </button>
    ));

    return { buttonData };
  }
}
export default Button;

---

谢谢

访问方法错误，请在use.dot运算符的大括号中使用字符串

render() {
    const buttonData = this.sounds.map((info) => (
      <button>
        {info.id}+{info.idnum}
      </button>
    ));

    return { buttonData };
  }

或

全部：

---

你可以通过简单地使用sound.map获得声音数组，而不是this.sounds.mapHi，我试过了。下面是它抛出的错误：错误：对象作为React子对象无效。找到：对象的键为{buttonData}。如果要呈现子级集合，请改用数组。您可以使用codesandbox或codepen为此创建一个数组，或者在此处显示发生的问题。您好，因此我尝试了这两种方法，得到的错误是TypeError:无法读取未定义的属性“map”。当我删除此项时，错误是error:Objects作为React子对象无效。found:object具有键{buttonData}。如果要呈现子对象集合，请改用数组。@Pruthvi请为此创建一个小演示。这里一定有我们遗漏的东西。你为什么要用这个。声音不是课堂的一部分。我更新了索尔。@palaѕѕѕѕ-我希望这一切都很好。@xdeepakv超级兄弟！刚看到你的密码笔。谢谢你的帮助！

render() {
    const buttonData = sounds.map((info) => (
      <button>
        {info["id"]}+{info["idnum"]}
      </button>
    ));

    return { buttonData };
  }

// import React from "react";
// import ReactDom from "react-dom";

const sounds = [
  {
    idnum: "1",
    id: "Q",
    src: "1.html",
  },
  {
    idnum: "1",
    id: "W",
    src: "",
  },
  {
    idnum: "1",
    id: "E",
    src: "",
  },
  {
    idnum: "1",
    id: "A",
    src: "",
  },
  {
    idnum: "1",
    id: "S",

    src: "",
  },
  {
    idnum: "1",
    id: "D",
    src: "",
  },
  {
    idnum: "1",
    id: "Z",
    src: "",
  },
  {
    idnum: "1",
    id: "X",
    src: "",
  },
  {
    idnum: "1",
    id: "C",
    src: "",
  },
];

class Button extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const buttonData = sounds.map((info, i) => (
      <button>
        {info["id"]}+{info["idnum"]}
      </button>
    ));
    return (<>{buttonData}</>)
  }
}
ReactDOM.render(
  <Button />,
  document.getElementById('root')
);