Javascript TypeError:无法分解属性'；showPlayer'；属于'；对象（…）（…）和#x27；因为它是未定义的

当我在本文中使用

useContext

时，我试图了解播放器组件有什么问题

错误消息

 Player.Button = function PlayerButton({ ...restProps }) {
> 42 |   const { showPlayer,setShowPlayer } = useContext(PlayerContext);

Player Component.jsx

import React, { useState, useContext, createContext } from "react";
import ReactDOM from "react-dom";
import {
  Container,
  Button,
  Overlay,
  Inner,
  Close,
} from "./styles/player-styles.js";

export const PlayerContext = createContext();

export default function Player({ children, ...restProps }) {
  const [showPlayer, setShowPlayer] = useState(false);

  return (
    <PlayerContext.Provider value={{ showPlayer, setShowPlayer }}>
      <Container {...restProps}>{children}</Container>
    </PlayerContext.Provider>
  );
}

Player.Video = function PlayerVideo({ src, ...restProps }) {
  const { showPlayer, setShowPlayer } = useContext(PlayerContext);
    // console.log(showPlayer)
  return showPlayer
    ? ReactDOM.createPortal(
        <Overlay onClick={() => setShowPlayer(false)} {...restProps}>
          <Inner>
            <video id="netflix-player" controls>
              <source src={src} type="video/mp4" />
            </video>
            <Close />
          </Inner>
        </Overlay>,
        document.body
      )
    : null;
};

Player.Button = function PlayerButton({ ...restProps }) {        <--- ERROR is here
  const { showPlayer,setShowPlayer } = useContext(PlayerContext);
//   console.log(showPlayer)
  return (
    <Button
      onClick={() => setShowPlayer((showPlayer) => !showPlayer)} {...restProps}>
      Play
    </Button>
  );
};

import React，{useState，useContext，createContext}来自“React”；
从“react dom”导入react dom；
进口{
集装箱，
按钮
叠加，
内部的
接近，
}来自“/styles/player styles.js”；
export const PlayerContext=createContext（）；
导出默认函数播放器（{children，…restProps}）{
const[showPlayer，setShowPlayer]=使用状态（false）；
返回(
{儿童}
);
}
Player.Video=函数PlayerVideo（{src，…restProps}）{
const{showPlayer，setShowPlayer}=useContext（PlayerContext）；
//console.log（showPlayer）
回归演艺家
？ReactDOM.createPortal(
setShowPlayer（false）}{…restProps}>
,
文件正文
)
：null；
};
Player.Button=函数PlayerButton（{…restProps}）{！showPlayer}{…restProps}>
玩
);
};

在浏览容器中呈现它

 <Card.Feature category={category}>
    <Player>
      <Player.Button />
      <Player.Video src="/videos/bunny.mp4" />
     </Player>
  </Card.Feature>

我不认为这是问题所在，但不会/不应该

（{…restProps}）

只是

（restProps）

？如果您将

注释掉，则

播放器.Video

是否正常工作？你认为你可以创建一个运行的代码沙盒来复制问题并将其链接到你的问题中吗？我不认为这是问题所在，但不会/不应该

（{…restProps}）

只是

（restProps）

？如果您将

注释掉，则

播放器.Video

是否正常工作？你认为你可以创建一个运行的代码沙盒来重现这个问题并将它链接到你的问题中吗？