如何使用自定义钩子在组件之间共享状态数据？

Question

我有以下自定义钩子，称为useFlash：

import { useState } from 'react';


export default function useFlash() {
  const [messages, setMessages] = useState([]);

  const showFlash = (message: string) => {
    setMessages([...messages, message]);
  };

  const clearMessage = (index: number) => {
    setMessages(messages.filter((_m, i) => index !== i));
  };

  return {
    messages,
    showFlash,
    clearMessage
  };
}

然后，我将这个HOC提供给其他两个组件：

import React from 'react';
import useFlash from '../effects/useFlash';

const withFlash = (WrappedComponent: React.Component) => {
  const WithFlash = () => {
    const { messages, showFlash, clearMessage } = useFlash();

    return (
      <WrappedComponent
        messages={messages}
        showFlash={showFlash}
        clearFlashMessage={clearMessage}
      />
    );
  };

  return WithFlash;
};

export default withFlash;

它运作良好，不同之处在于每次使用HOC都会获得自己的状态数据。我需要状态是全球性的。我知道我可以与消费者/提供者一起使用上下文，但是我认为这种方式会更简单一些。事实并非如此，有没有办法使这一全球性？

Answer 1

您需要使用Context，但是还不错。

创建您的上下文。

import React, { useState } from 'react';

export const FlashContext = React.createContext();

export const FlashProvider = ({ children }) => {
  const [messages, setMessages] = useState([]);
  return (
    <FlashContext.Provider value={{ messages, setMessages }}>
      {children}
    </FlashContext.Provider>
  );
};

将您的组件包装在提供程序中树中更高的位置。

import React from "react";
import { FlashProvider } from "./flash-context";

const App = () => <FlashProvider><TheRest /></FlashProvider>;

export default App;

然后在自定义钩子中使用上下文。

import React, { useContext } from "react";
import { FlashContext } from "./flash-context";

export default function useFlash() {
  const { messages, setMessages } = useContext(FlashContext);

  const showFlash = (message) => {
    setMessages([...messages, message]);
  };

  const clearMessage = (index) => {
    setMessages(messages.filter((_m, i) => index !== i));
  };

  return {
    messages,
    showFlash,
    clearMessage
  };
}