React Hooks -- 未捕获的不变冲突:对象作为 React 子项无效

Question

我正在开发免费的CodeCamp鼓机应用程序。在带有函数箭头组件的应用程序中，我在父组件中使用 useState 钩子设置display的状态，并将其作为道具传递给子组件。在父组件中，我尝试在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>
);
}

Answer 1

您将状态设置为对象而不是字符串。取下其周围的大括号。

const handleDisplay = display => {
setDisplay(display);
}

Answer 2

这已经得到了回答，但是由于您正在学习教程，我假设您正在学习 React，并希望指出一些事情来帮助您:)

指出了状态的错误使用，但只是为了澄清(以及我认为您使用对象的原因(：以"旧"的方式，对于类组件，状态曾经是一个对象，你需要像对象一样更新它。这里的例子说明了这一点。使用 Hooks，您不需要设置整个 State 对象，只需要设置特定的状态属性。更多信息在这里。

另一点是，至少在您的 CodePen 示例中，您错过了useState的导入。你要么需要像这样import { useState } from React导入它，要么像这样使用它React.useState，因为这是一个单独的模块，导入 React 时默认不导入。

最后一点是，当使用循环创建组件时(例如带有map的<DrumPad>(，您需要提供一个"key"属性。 这将帮助 React 跟踪需要更新或重新渲染的内容。

O 使用此链接中的这些更改更新了您的代码，如果您想查看它的工作：

https://codesandbox.io/s/reverent-browser-zkum2

祝你好运，希望你喜欢 React Hooks :)