Я получаю эту ошибку при запуске кода ReactJs:
index.js: 1375 Предупреждение. Невозможно выполнить обновление состояния React для отключенного компонента. Это не работает, но это указывает на утечку памяти в вашем приложении. Для исправления отмените все подписки и асинхронные задачи в методе componentWillUnmount.
Я попробовал приведенный ниже код, но все равно получаю ту же ошибку. Я вижу код в stackoverflow с вызовом API в componentDidMount, но мой исходит от Redux. Как отписаться или отменить подписку и асинхронные задачи в componentWillUnmount?
Боролся с этим всю ночь.
Это мои редукторы:
const initState = {
error_message: null,
patient : null,
isLoading: true,
patients: [],
}
const patientReducer = (state = initState, action) => {
switch (action.type){
case ALL_PATIENT_ERROR:
case SHOW_PATIENT_ERROR:
console.log(action.payload)
return {
...state,
error_message: action.payload
}
case SHOW_PATIENT_SUCCESS:
return {
...state,
patient : action.payload.patient,
isLoading: false
}
case ALL_PATIENT_SUCCESS:
return {
...state,
patients : action.payload,
isLoading: false
}
default:
return state
}
}
Компонент:
class AllPatient extends Component {
_isMounted = false;
state ={
isLoading: true
}
_changeHandler = (e) => {
let data = {...this.state}
data[e.target.name] = e.target.value
this.setState(data)
}
componentDidMount = () =>{
this._isMounted = true;
this.props.getPatients()
}
componentWillUnmount = () =>{
this._isMounted = false;
this.unsubscribe();
}
render() {
console.log(this.props)
let {patients} = this.props.patients
console.log(patients)
return (
<div>
<Container>
<SearchPatients change={this._changeHandler} />
{(this.props.patients.isLoading) ? <Loading /> :
<Card>
<Card.Body>
<Card.Title>
All Patients
</Card.Title>
<Table responsive>
<thead>
<tr>
<th>#</th>
<th>Full Name</th>
<th>Phone</th>
<th>DOB</th>
<th>Email</th>
<th>Last Visit</th>
</tr>
</thead>
<tbody>
{patients.patients.map(patient =>
<PatientList key={patient._id} patient={patient}/>
)}
</tbody>
</Table>
</Card.Body>
</Card>}
</Container>
</div>
)
}
}
const mapStateToProps = (state) =>{
console.log(state)
return {
patients : state.patients,//.patients.patients,
// isLoading : state.isLoading
}
}
const mapDispatchToProps = (dispatch) =>{
return {
getPatients : () => dispatch(getAllPatients())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AllPatient)
Действие:
export const getAllPatients = () => async (dispatch) => {
let token = getToken()
if(token){
try{
const response = await axios.get(`${baseUrl}/api/patients`,headerInfo,{cancelToken: source.token})
return dispatch({
type : ALL_PATIENT_SUCCESS,
payload: response.data
})
}catch(e){
console.log(e)
return dispatch({
type : ALL_PATIENT_ERROR,
payload: e.response
})
}
}else{
console.log('error')
}
}