Блог

Главная - Вопросы по программированию - Маршрутизация реакции — сохраняются ли значения состояния компонента и можно ли использовать useReducer с некоторыми переменными useState в нем?

Маршрутизация реакции — сохраняются ли значения состояния компонента и можно ли использовать useReducer с некоторыми переменными useState в нем?

#reactjs #react-router

#reactjs #react-router

Вопрос:

Я новичок в React, и я планирую создать простой сайт управления задачами с использованием React, в отношении которого у меня есть несколько путаниц. Ниже приведен каркас, который я сделал для проекта:

Каркас моего простого сайта управления задачами

Моя первая путаница связана с полем номера задачи, которое я хочу, чтобы система автоматически генерировала. Для простоты я хочу, чтобы номер задачи начинался с 001, который автоматически увеличится на 1 после создания новой задачи. На данный момент меня не волнует сохранение значения после того, как пользователь покинет или обновит сайт. Поэтому я думаю, что я бы установил taskNumber значение переменной состояния, чтобы отслеживать ее значение. Однако, поскольку я хочу показать список всех созданных задач на другой странице, я задаюсь вопросом, приведет ли маршрутизация на другую страницу для отображения задач к сбросу значения taskNumber . После выполнения некоторых поисков я все еще не смог найти на него ответ.

Если значение в taskNumber не будет сохранено, когда пользователь перейдет на страницу, на которой показаны все задачи, есть ли какой-либо рекомендуемый способ сохранения такого значения на разных страницах веб-сайта? Под этим я подразумеваю использование только интерфейса и React.

Я также озадачен тем, будет ли использование useReducer перехвата хорошей идеей для получения ввода пользователя для информации о задаче. Моя первоначальная идея — создать объект состояния для useReducer перехвата, который будет содержать каждую часть информации о задаче:

 const initialState = {
  taskNum: taskNum, //will start at 001  
  taskTitle: "", //empty by default
  importance: 1, //1 stands for trivial, 2 is normal, 3 is important, and 4 is highly important
  description: "", //empty by default
  taskState: taskState, //will be set as another state variable
  startTime: getTime, //will be a function for getting the date and time
  endTime: null, //not set until task is completed
  awaitNotes: null, //disabled unless task state is awaiting
};

Однако, похоже, что встраивание некоторых переменных состояния в useReducer перехват неслыханно и неправильно.

Сейчас я в основном застрял в этих двух точках. Я надеюсь, что кто-нибудь сможет прояснить мою путаницу в отношении них и дать мне несколько советов относительно того, какие знания в React мне также могут понадобиться для создания этого проекта (достаточно ли знать базовые хуки React?) Большое вам спасибо за вашу любезную помощь.

Комментарии:

1. Вы можете использовать redux или react context , поскольку вы хотите сделать состояние глобальным объектом.

2. Если вам нужно сослаться на какое-то «общее состояние», тогда решение / шаблон заключается в повышении состояния . Если ваше приложение становится более сложным, могут помочь такие решения, как React Context API и react-redux. Вероятно, вам также потребуется сохранить состояние вашего приложения в локальном хранилище, чтобы при перезагрузке страницы / приложения вы могли заполнить свое состояние сохраненными данными. Если вы не знакомы с шаблоном reducer, я предлагаю придерживаться обычного состояния, то useState есть сохранять каждый фрагмент данных в своем собственном фрагменте состояния.

3. Мне интересно, приведет ли маршрутизация на другую страницу для отображения задач к сбросу значения , чтобы упростить ответ на этот вопрос, все зависит от того, к какому компоненту принадлежит состояние. Если этот компонент когда-либо отключится от виртуального DOM (в отличие от просто повторного рендеринга без размонтирования), то да, состояние будет сброшено. Вот почему «глобальное» состояние обычно реализуется как поставщик контекста в верхней части вашего приложения, потому что оно никогда не размонтируется из-за его расположения в верхней части виртуального DOM.