11
Июн
2021

Что я делаю не так и получаю: TypeError: Cannot destructure property ‘patients’ of ‘Object(…)(…)’ as it is undefined?

Я создал контекст и в дочерние элементы пытаюсь передать значения:

import './App.css';
import React, { createContext, useState } from 'react';
import Content from './components/Content';
import Sidebar from './components/Sidebar';
import PatientService from './components/services/PatientService';

const PatientContext = createContext([{}]);

function App() {
  const [selectedPatient, setSelectedPatient] = useState([]);
  const [patients, setPatients] = useState([{ name: "Username", age: 19 }]);

  async function patientsHasChanged() {
    const patientService = new PatientService();
    const loadedPatients = await patientService.getPatients();
    setPatients(loadedPatients);
  };

  return (
    <div className='app'>
      <PatientContext.Provider value={{selectedPatient, setSelectedPatient, patients, patientsHasChanged}}>
        <Sidebar />
        <Content />
      </PatientContext.Provider>
    </div>
  );
}

export default App;

В одном из компонентов (Sidebar) я достаю некоторые значения:

import React, { useContext } from 'react';
import PatientContext from '../App';

const Sidebar = () => {
    const {patients, setSelectedPatient} = useContext(PatientContext);

    return (
        <div className='sidebar'>
            <div className='search'>
                <input type="text" placeholder='Search' />
                <a href="/TechTask/new"><button>New patient</button></a>
            </div>
            <div className='list'>
                <ul>
                    {patients.map((p) =>
                        <li onClick={setSelectedPatient}>
                            <div className='name'>
                                {p.name}
                            </div>
                            <div className='age'>
                                {p.age}
                            </div>
                        </li>)
                    }
                </ul>
            </div>
        </div>
    );
};

export default Sidebar;

Структура папок:

App.js
components-
---Sidebar.jsx
---Content.jsx

Но в результате получаю ошибку:

TypeError: Cannot destructure property 'patients' of 'Object(...)(...)' as it is undefined.

Насколько я понимаю - это потому, что из контекста достается пустой элемент, но почему? Ведь в контексте есть данные.

Источник: https://ru.stackoverflow.com/questions/1294111/%D0%A7%D1%82%D0%BE-%D1%8F-%D0%B4%D0%B5%D0%BB%D0%B0%D1%8E-%D0%BD%D0%B5-%D1%82%D0%B0%D0%BA-%D0%B8-%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B0%D1%8E-typeerror-cannot-destructure-property-patients

Тебе может это понравится...

Добавить комментарий