Javascript 在React中将操作添加到上下文api后出错

我一直收到这样一个错误“TypeError:对不可重写实例进行破坏的尝试无效”，我不确定出了什么问题。我使用的是React，这里的上下文API是我的代码。我不确定我是否遗漏了一个打字错误，因为我以前就知道会这样做

Store.tsx

interface IState {
    episodes: [],
    favourites: []
}

interface IAction {
    type: string,
    payload: any
}

const initialState: IState = {
    episodes: [],
    favourites: []
}


export const Store = React.createContext<IState | any>(initialState)

function reducer(state: IState, action: IAction): IState {
    switch (action.type) {
        case 'FETCH_DATA':
            return {...state, episodes: action.payload }
        default:
            return state
    }
}



export function StoreProvider(props: any): JSX.Element {
    const [state, dispatch] = React.useReducer(reducer, initialState)
    return <Store.Provider value={{state, dispatch}}>{props.children}</Store.Provider>
}

界面状态{
插曲：[]，
收藏夹：[]
}
界面位移{
类型：字符串，
有效载荷：任何
}
常量初始状态：IState={
插曲：[]，
收藏夹：[]
}
export const Store=React.createContext（initialState）
功能减速机（状态：IState，动作：IAction）：IState{
开关（动作类型）{
案例“获取数据”：
返回{…状态，片段：action.payload}
违约：
返回状态
}
}
导出函数StoreProvider（props:any）：JSX.Element{
const[state，dispatch]=React.useReducer（reducer，initialState）
返回{props.children}
}

App.tsx

import React, { useEffect } from 'react'
import { Store } from './Store'


export default function App():JSX.Element {
  const [state, dispatch] = React.useContext(Store)

  useEffect(() => {
    state.episodes.length() === 0 && fetchDataAction()
  })

  const fetchDataAction = async () => {
    const URL = 'https://api.tvmaze.com/singlesearch/shows?q=the-office&embed=episodes'
    const data = await fetch(URL)
    const dataJSON = await data.json()
    return dispatch({
      type: 'FETCH_DATA',
      payload: dataJSON._embedded.episodes
    })
  }
  console.log(state)

  return (
    <>
      <h1>Rick and Morty</h1>
      <p>Pick your favourite episode</p>
    </>
  )
}

import React，{useffect}来自“React”
从“/Store”导入{Store}
导出默认函数App（）：JSX.Element{
const[state，dispatch]=React.useContext（存储）
useffect（（）=>{
state.scents.length（）==0&&fetchDataAction（）
})
const fetchDataAction=async（）=>{
常量URL=https://api.tvmaze.com/singlesearch/shows?q=the-office&embed=剧集'
常量数据=等待获取（URL）
const dataJSON=wait data.json（）
退货({
键入：“获取_数据”，
有效负载：dataJSON.\u embedded.com
})
}
console.log（状态）
返回(
里克和莫蒂
选择你最喜欢的一集

)
}

Index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { StoreProvider } from './Store'


ReactDOM.render(
<StoreProvider>
<App />
</StoreProvider>, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“/Store”导入{StoreProvider}
ReactDOM.render(
，document.getElementById（'root'）；

---

任何帮助都将不胜感激。谢谢

我明白了只要把

const[state，dispatch]=React.useContext（Store）

改成

const{state，dispatch}=React.useContext（Store）< /代码> 
您是否可以发布错误日志。只是添加了一个错误图片的链接，还有“<代码>索引”。JS：1375在组件中发生了上述错误：在StutePo提供者（在SRC/index中。TSX：9）中的App（在SRC/index中：TSX：10）考虑添加错误边界到您的树来定制错误处理行为。<代码>