Блог

Привет, сообщество stackoverflow.Итак, у меня возникла проблема с контекстным Api. В контексте, который у меня есть const initialState = { store: windowsIcons } , где находится ошибка, и это ошибка ReferenceError: Cannot access 'Store' before initialization Вот чего я пытаюсь добиться. Я повторяю данные в компоненте Show, где у меня есть кнопка, предполагается, что кнопка удаляет «элемент» из массива на основе определенного идентификатора. Я знаю, что повторяю его дважды в Show Compnent и в WindowsIcon, его необходимо удалить в Show и в компоненте Windows. Я надеюсь, вы поняли, чего я пытаюсь добиться. Заранее благодарю вас

 

```Context```
import React, { useState, useContext, useReducer, useEffect } from 'react'
import {windowsIcons} from './data'
import reducer from './reducer'

const AppContext = React.createContext()

const initialState = {
icons: windowsIcons
}

const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState)

  const remove = (id) => {
    dispatch({ type: 'REMOVE', payload: id })
  }
 
  return (
    <AppContext.Provider
      value={{ 
        ...state,
        remove,       
      }}
      >
      {children}
    </AppContext.Provider>
  )
}

export const useGlobalContext = () => {
  return useContext(AppContext)
}

export { AppContext, AppProvider }



```data.js```
export const windowsIcons =[
  { 
     id:15,
     url:"something/",
     name:"yes",
     img:"/images/icons/crud.png",
    },
    {
        id:16,
        url:"something/",
        name:"nine",
        img:"/images/icons/stermm.png",
       },
       {
        id:17,
        url:"domething/",
        name:"ten",
        img:"/images/icons/ll.png",
       },
       {
        id:18,
        url:"whatever",
        name:"twenty",
        img:"/images/icons/icons848.png",
       },
       {
        id:19,
        url:"hello",
        name:"yeaa",
        img:"/images/icons/icons8-96.png",
       },
    ]

```reducer```

const reducer = (state, action) => {  
    if (action.type === 'REMOVE') {
      return {
        ...state,
       icons: state.icons.filter((windowsIcons) => windowsIcons.id !== action.payload),
      }
    }
}

export default reducer


```WindowsIcon Component```
import React from 'react'
import {windowsIcons} from "../data"
import './WindowsIcons.css'
const WindowsIcons = ({id, url, img, name}) => {
    return (
        <>
            <li className='windows__icon' key={id}>
                 <a href={url}>
                    <img className='windows__image' src={img}/>                                                        
                    <caption className='windows__text'>{name}</caption>                   
                 </a>
            </li>                   
        </>
    )
}
export default WindowsIcons

``` Show Component```
import React from 'react'
import { useGlobalContext } from '../../context'
import WindowsIcons from '../../WindowsIcons/WindowsIcons'
const Show = () => {
  const { remove, state} = useGlobalContext() 

    return (
        <div className='control__Panel'>
          {state.map((unin)=>{         
            return (             
             <div className='' key ={unin.id}>
               <img className='control__Img' src={unin.img} />
                <caption>{unin.name}</caption>
                <button  onClick={() => remove(id)}>Uninstall</button>
              </div> )
          })}
         <WindowsIcons key={unin.id} {...unin}/> 
        </div>
    )
}

export default Show