Блог

Есть ли способ сохранить значение местоположения компонента функции реакции даже после его размонтирования, чтобы значение не менялось после его повторного монтирования?

Я новичок в react. Мой вопрос может показаться простым.

Я отправляю некоторые значения сеанса в расположении ниже компонента функции реакции ConsolePage из другого компонента функции. Но когда ConsolePage он размонтируется и монтируется снова, значение, которое я ранее отправил, стирается.

Консольный компонент

 const ConsolePage: React.FC<ConsoleProps> = ({
  history,
  isAdmin
}) => {
  
  const [showModal, setShowModal] = useState(false);
  const [isNewInitiative, setIsNewInitiative] = useState(false);
  const [successfulSubmitToast, setSuccessfulSubmitToast] = useState(false);
  const [displayedInitiatives, setDisplayedInitiatives] = useState<
    Initiative[]
  >([]);
  const [editInitiative, setEditInitiative] = useState<Initiative>();
  const [lastCategory, setLastCategory] = useState<string>("Environment");
  const location = useLocation(); //<----- This gets erased once the component is unmounted and mounted again 
  .
  .
  .
  .
  .}  

Вот как я отправляю параметры местоположения из Login компонента:

   history.push('/console',{
                                token:response.token,
                                companyID: response.user.companyID, 
                                firstName: response.user.firstName, 
                                lastName: response.user.lastName,
                                emailAddress: response.user.emailAddress 
                                }
                    );  

Мне нужно, чтобы приведенные выше параметры оставались в компоненте ConsolePage.

В React данные «запоминаются» через нечто, называемое состоянием. Состояние — это концепция для каждого компонента — каждый компонент (или функциональный компонент) имеет свое собственное состояние.

Итак, как вы передаете данные из одного компонента в другой? Реквизит. Но что, если вы хотите изменить его значение и отправить его обратно? Вы не делаете этого, изменяя значение реквизита. Вместо этого вы можете отправить функцию вместе с реквизитами (как отдельный реквизит). Когда значение изменяется в следующем компоненте, вы вызываете эту функцию с новым значением данных в качестве параметра, и эта функция отправляет данные обратно родительскому компоненту — до тех пор, пока вы не достигнете родительского компонента, где эти данные хранятся в состоянии (а не принимаются как значение prop). Именно там вы обновляете состояние обычным способом (setState или useState).

Но нет ли более простого способа, который не включает передачу данных от компонента к компоненту, как эстафета? Да — это называется «Контекст».

Контекст работает следующим образом. В низкоуровневом компоненте (обычно в вашем базовом компоненте) у вас есть некоторые данные, хранящиеся в состоянии. Затем вы определяете контекст для совместного использования этих данных, а затем вы окружаете свои маршруты поставщиком контекста.

Внутри каждого компонента, который заключен в MyContextName.Provider , вы затем useContext внутри компонента считываете значение контекста и присваиваете его локальной переменной состояния.

Вот несколько статей с демонстрациями кода и лучшими объяснениями, чем я предоставил выше.

https://ui.dev/react-context/

https://blog.flexiple.com/provider-pattern-with-react-context-api/

https://www.cronj.com/blog/react-context