Действие контекста React вызывается, но хранилище не обновляется (нет Redux / React Context / React Hooks)

Question

Я создаю приложение с использованиемact.js - контекст реакции (используйтеcontext вместо потребителя) и хуков.(Нет библиотеки редуксов / промежуточного программного обеспечения)

Когда компонент отправляет действие для обновления глобального состояния, я использую «usecontext» для использования действий, а когда компоненту требуются данные из глобального состояния, я также использую «используйтеcontext 'для получения обновленного состояния из глобального состояния.

Сейчас я пытаюсь сделать , когда извлекаемый API возвращает состояние ошибки, обновите состояние ошибки в глобальном состоянии.

Итак, в моем файле контекста я экспортирую провайдера и контекст в конец файла.У провайдера есть состояние, и есть действия по его обновлению.

Ниже приведен файл контекста ошибки.В основном действие sendError предназначено для обновления состояния и сообщения об ошибке, а действие clearError предназначено для очистки состояния ошибки и сообщения.

import React, { createContext, useState } from 'react';
import errorInitialState from './initialState';

const ErrorContext = createContext();
const { Provider, Consumer: ErrorConsumer } = ErrorContext;

const ErrorProvider = (props) => {
  const [errorState, setErrorState] = useState(errorInitialState);

  const errorActions = {
    sendError: (payload) => {
      setErrorState({
        ...errorState,
        errorStatus: {
          status: payload.status,
          message: payload.message,
        },
      });
    },
    clearError: () => {
      setErrorState({
        ...errorState,
        errorStatus: {
          status: true,
          message: '',
        },
      });
    },
  };

  const value = { errorState, errorActions };
  return (
    <Provider value={value}>
      {props.children}
    </Provider>
  );
};


export {
  ErrorProvider,
  ErrorContext,
};

И для моего компонента, которыйхочу отправить действие для обновления глобального состояния, я использую usecontext для использования действий.Ниже приведен пример компонента.Он очищает ошибку (действие clearError) всякий раз, когда этот компонент отключается, и этот компонент возвращает сообщение об ошибке из состояния, если состояние ошибки равно false.

import React, { useState, useEffect, useContext } from 'react';
import { ErrorContext } from './context/error';

cosnt Example = () => {
  useEffect(() => () => errorActions.clearError(), []);
  const { errorActions, errorState } = useContext(ErrorContext);

  return (
    {
        !errorState.errorStatus.status
        && <p>{errorState.errorStatus.message}</p>
      }
  );
}

sendError Действие используется из вызова Axios API, и далее часть кода.

        axios
        .put(``, example)
        .then((response) => {
          // handle response
        })
        .catch((error) => {
          const { response } = error;
          if (response.status === 500) {
            errorActions.sendError({ status: false, message: 'Occured internal server error. Please try again.' });
          }
        });

Итак, из пользовательского интерфейса происходит то, что

1. , когда естьсообщение об ошибке 500
2. появляется в примере компонента
3. , когда я оставляю этот компонент примера из пользовательского интерфейса (что означает, размонтирует)
4. вызывается действие clearError
5. , но когда я возвращаюсь к компоненту Пример в пользовательском интерфейсе, по-прежнему отображается сообщение об ошибке.

Мне хотелось бы получить совет:

• если этот способ использования действия / состояния корректен из компонента
• , хотите понять, почему сообщение об ошибке продолжает отображаться