使用 React 构建鼓机时出错

Question

I'm building a fcc-drum machine using React I get the following error when trying to map a data object:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App .

Below is the data that I am trying to map along with my code:

const soundData = [{ 
 letter:"Q",
 src:"https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/clap.wav",
 id: "clap"
},{

    letter:"W",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/hihat.wav",
    id:"hihat"
 },
 {
    letter:"E",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/kick.wav",
    id:"kick"
  },{
    letter:"A",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/openhat.wav",
    id:"openhat"
   },{

    letter:"S",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav",
    id:"boom"
 },{

    letter:"D",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/ride.wav",
    id:"ride"
 },{

    letter:"Z",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/snare.wav",
    id:"snare"
 },{

    letter:"X",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tom.wav",
    id:"tom"
 },{

    letter:"C",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav",
    id:"tink"
 }]

   export default soundData
import React from "react";
import "./App.css";
import soundData from "./soundData.js";
import DrumPad from "./drumPad.js";

class App extends React.Component {
  render() {
    console.log(soundData);
    console.log(DrumPad);

    return (
      <div id="drum-machine">
        <div id="display" />
        {soundData.map(Data => (
          <DrumPad />
        ))}
      </div>
    );
  }
}

export default App;

import React from "react";

function DrumPad(props) {
  return <div className="drum-pad" />;
}

export default DrumPad

What am I doing wrong?

Answer 1

I would recommend taking a look at this question to find out more details about your error, but nevertheless, I've shared a working example below using functional components and fixing the missing key error mentioned by @DaniilLoban. The working example will print out the value of the letter and id keys from each object in your soundData array.

App.js

import React from "react";
import "./styles.css";
import DrumPad from "./DrumPad";
import soundData from "./soundData";

export default function App(props) {
  return (
    <div id="drum-machine">
      <div id="display" />
      {soundData.map((data) => (
        <DrumPad data={data} key={data.letter} />
      ))}
    </div>
  );
}

DrumPad.js

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

export default function DrumPad(props) {
  const { data } = props;
  return (
    <div className="drum-pad">
      <p>{data.letter}</p>
    </div>
  );
}