Блог

Я пытаюсь создать свой проект в React. Эта часть проекта состоит из списка элементов, в каждом из которых есть кнопка X для удаления этого элемента. Каждый отдельный элемент является компонентом моего приложения react. Когда кнопка нажата, я устанавливаю переменную (переданную через useContext) под названием setPopup, поэтому появляется всплывающее окно с вопросом, уверены ли вы, что хотите удалить файл. Проблема в том, что когда я нажимаю на файл, возникает эта ошибка:

 TypeError: Cannot read properties of undefined (reading 'setPopup')  

Это код компонента:

 import '../styles/styleF.css'; import {PopupContest} from './HomePage'; import { useContext } from 'react';  const SFile = (n) =gt; {  const v = useContext(PopupContest);  let currentImg = c;  return lt;gt;   lt;div className="fileSingle"gt;  lt;img src={currentImg} alt="img" style={{'height':'50px', 'width':'50px','position':'relative', 'top':'5', 'left':'0'}} /gt;  lt;h3gt;{n.name   "."   n.img}lt;/h3gt;  lt;button style={{'height':'50%', 'marginTop':'10px'}} onClick={() =gt; {v.setPopup(6); v.setSelectFile(n.ident   "")}}gt;Xlt;/buttongt;  lt;/divgt;  lt;/gt; }  export default SFile;  

Я хотел бы знать, почему это происходит и как это правильно исправить. Код, который эффективно удаляет файл, находится в другом файле и компоненте и работает. Я читал в некоторых ответах, что я должен проверить, не определено ли это, но чтобы выполнить условие проверки, код все равно ломается. Так что я не знаю, как с этим справиться. Кто-нибудь может помочь? Огромное спасибо

PopupContest Контекст должен иметь Поставщика, и этот Поставщик должен быть заключен в компонент, который является родительским (любого уровня) SFile компонента. Затем вы можете использовать потребитель PopupContest SFile компонента in.

Что — то вроде этого:

 import {Provider as PopupContestProvider} from './HomePage';  return (  lt;PopupContestProvidergt;  lt;SFile /gt;  lt;/PopupContestProvidergt; );