Question

我正在使用react.js创建一个应用程序-react context（usecontext而不是consumer）和钩子。（没有redux /中间件库）

无论何时组件发送动作来更新全局状态，我都会使用“ usecontext”来使用这些动作，并且每当组件需要来自全局状态的数据时，我也会使用“ usecontext”来获取来自全局状态的更新状态。状态。

我现在要做的是获取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>
      }
  );
}

从axios api调用中使用 sendError 操作，下面是代码的一部分。

        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.' });
          }
        });

因此，UI发生的是

出现500错误
错误消息出现在示例组件上
当我从UI中离开此Example组件时（这意味着卸载）
clearError操作称为
但是当我回到UI上的Example组件时，仍然显示错误消息。

我想咨询的是

如果这种从组件中使用操作/状态的方式正确
想要了解为什么继续显示错误消息

React上下文动作被调用，但是存储没有更新（没有Redux / React Context / React Hooks）

0 个答案: