我正在开发 freeCodeCamp 鼓机应用程序。在我的应用程序中，使用函数箭头组件，我使用父组件中的 useState 钩子设置 display 的状态，并将其作为 prop 传递给子组件。在父组件中，我尝试在 div 中呈现 display 状态。但是，当触发该方法时（单击“鼓垫”div），应用程序崩溃。在控制台中，我收到一条错误消息，提示“未捕获的不变违规：对象作为 React 子项无效（找到：带有键 {display} 的对象）。如果您想要呈现子项集合，请改用数组。” 我一直在关注这个项目的 YouTube 教程，但使用箭头函数组件和 Hooks 而不是教程中使用的常规类 - 在教程中（ 本视频 的 1:55 左右）有人成功完成了我想做的事情，所以我认为问题与使用 Hooks 或箭头函数组件有关。

// APP COMPONENT (PARENT)

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  // etc.
];

const App = () => {

  const [display, setDisplay] = useState(''); // <----

  const handleDisplay = display => { // <----
    setDisplay({ display });
  }

  return (
    <div className="App">
      <div className="drum-machine">
        <div className="display">
          <p>{display}</p> // <---- Related to error in console
        </div>
        <div className="drum-pads">
          {sounds.map(sound => (
            <DrumPad
              id={sound.id}
              letter={sound.letter}
              src={sound.src}
              handleDisplay={handleDisplay} // <----
            />
          ))}
        </div>
      </div>
    </div>
  );
}

// DRUMPAD COMPONENT (CHILD)

const DrumPad = ({ id, letter, src, handleDisplay }) => {

  let audio = React.createRef();

  const handleClick = () => {
    audio.current.play();
    audio.current.currentTime = 0;
    handleDisplay(id); // <----
  }

  return (
    <div
      className="drum-pad"
      id={id}
      onClick={handleClick}
    >
      <p className="letter">{letter}</p>
      <audio
        ref={audio}
        id={letter}
        src={src}
      >
      </audio>
    </div>
  );
}