Как изменить state родительського компонента через дочерний?
Возможно очень банальный вопрос, т.е его уже достаточно часто задавали, но не могу с ним разобраться.
Суть в том, что я пытаюсь передать состояние дочернего элемента в родительский. Вот как я это делаю:
- Создал сервис в котором храню функции по обработку даных:
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');
}
}
- Создал контекст, который передаёт состояние в дочерние компоненты, т.к они должны взаимодействовать с ним
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;
- Создал сам компонент, который должен взаимодействовать с состоянием:
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, а я не могу понять как.
Буду благодарен за ответ или подсказку.