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

Question

i有以下自定义挂钩称为 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
  };
}

然后，我将此事件提供给其他两个组件：

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

您需要使用上下文，但还不错。

创建您的上下文..

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
  };
}