Как передать функции для изменения состояния от одного компонента к другому через Reactjs ContextAPI

Question

Мне нужно поделиться состоянием компонента с несколькими другими, я считаю, что один из самых простых способов выполнить эту функцию — использовать контекстный API React.

Компонент, который содержит состояние, которым нужно управлять, является предупреждением, следующим кодом ниже:

import React, { useState, createContext } from 'react';
import { Snackbar } from '@material-ui/core/';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';

function Alert(props: AlertProps) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

type PropsAlertContext = {
  alertOpen: boolean;
  setAlertOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

const DEFAULT_VALUE = {
  alertOpen: false,
  setAlertOpen: () => {},
};

const AlertContext = createContext<PropsAlertContext>(DEFAULT_VALUE);

const AlertContextProvider: React.FC = ({ children }) => {
  const [alertOpen, setAlertOpen] = useState(false);

  const handleAlertClose = (event?: React.SyntheticEvent, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }
    setAlertOpen(false);
  };

  return (
    <AlertContext.Provider
      value={{
        alertOpen,
        setAlertOpen,
      }}
    >
      <Snackbar
        open={alertOpen}
        autoHideDuration={6000}
        onClose={handleAlertClose}
      >
        <Alert onClose={handleAlertClose} severity="error">
          {children}
        </Alert>
      </Snackbar>
    </AlertContext.Provider>
  );
};

export { AlertContextProvider };
export default AlertContext;

И код любого другого компонента, который может получить доступ к контексту, созданному в Alert:

import React, { useContext, useCallback } from 'react';

import AlertContext from '../../hooks/Alert';

const OtherComponent: React.FC = () => {
  const { alertOpen, setAlertOpen } = useContext(AlertContext);

  const alert = useCallback(() => {
    setAlertOpen(true);
    console.log(alertOpen);
    // Here return false..
  }, [alertOpen, setAlertOpen]);
  
  return (
    <div>
        <button onClick={alert} type="button">
            alert
        </button>
    </div>
  );
};

export default OtherComponent;

Происходит следующее: я могу получить доступ к содержимому alertOpen через "otherComponent", однако не могу изменить состояние с помощью setAlertOpen.

Как передать функции для изменения состояния от одного компонента к другому через Reactjs ContextAPI

Ответы (0)