Как изменить state родительського компонента через дочерний?

Возможно очень банальный вопрос, т.е его уже достаточно часто задавали, но не могу с ним разобраться.

Суть в том, что я пытаюсь передать состояние дочернего элемента в родительский. Вот как я это делаю:

  1. Создал сервис в котором храню функции по обработку даных:
import firebase from 'firebase';

export default class PatientService {
    async savePatient(patient) {
        const db = await firebase.database();
        db.ref('name').push(patient.name);
        // Some code here ...
    }

    getPatients(setPatients) {
        return setPatients('TEST');
    }
}
  1. Создал контекст, который передаёт состояние в дочерние компоненты, т.к они должны взаимодействовать с ним
import React, { useState } from 'react';
import {createContext} from 'react';
import PatientService from './components/services/PatientService';

const PatientContext = createContext([]);

export function PatientInfoProvider({children}) {
    const [patients, setPatients] = useState([]);

    const patientsHasChanged = () => {
        const newGetPatient = new PatientService();
        newGetPatient.getPatients(setPatients);
    }

    return (
        <PatientContext.Provider value={{patients, patientsHasChanged}}>
            {children}
        </PatientContext.Provider>
    );
}

export default PatientContext;
  1. Создал сам компонент, который должен взаимодействовать с состоянием:
import React, { useContext, useState } from 'react';
import { useHistory } from 'react-router';
import PatientContext from '../PatientContext';
import PatientService from './services/PatientService';

const NewPatient = () => {
    const recievedContext = useContext(PatientContext);
    const [patient, setPatient] = useState({});
    const history = useHistory();

    const savePatient = () => {
        const newPatientService = new PatientService();

        newPatientService.savePatient(patient)
            .then(p => {
                recievedContext.patientsHasChanged();
                history.push(`/TechTask`);
            });
    }

    const cancelInfo = () => {
        history.push(`/TechTask`);
    }

    return (
        <div>
            <ul>
                <li><span>Name:</span><input type="text" value={patient.name} onChange={(e) => setPatient({ ...patient, name: e.target.value })} placeholder='Your name:' /></li>
                 //Some code here
                <li><button onClick={savePatient}>Save</button></li>
                <li><button onClick={cancelInfo}>Cancel</button></li>
            </ul>
        </div>
    );
}

export default NewPatient;

В этом компоненте есть своё состояние patient, которое изменяется при измениях инпутов. По клику на кнопку Save срабатывает функция savePatient в которой вызываю метод класа PatientService и сохраняю значения в базу даных на сервере. Дальше из контекста достаю функцию patientHasChange, чтобы сказать родительському состоянию измениться. Тут у меня начались проблемы.

Проблема в том, что функция getPatients должна вызываться и изменять состояние комопонента PatientInfoProvider, а я не могу понять как.

Буду благодарен за ответ или подсказку.


Ответы (0 шт):