вопрос проектирования высокого уровня в Reactjs: передача данных файла загрузки между компонентами перед отправкой в ​​бэкэнд - PullRequest
Новая
       3

вопрос проектирования высокого уровня в Reactjs: передача данных файла загрузки между компонентами перед отправкой в ​​бэкэнд

0 голосов
/ 09 апреля 2020

Приложение: У меня есть портал для загрузки, в котором есть три компонента - помните, я еще не настроил все компоненты для работы, я только создал грубый макет интерфейса.

  1. Первый компонент - это тот, где пользователь выбирает файл - как показано на рисунке A
  2. Второй компонент - это экран подтверждения, где определенные наборы данных из файла выкладываются для пользователя. подтвердить - как показано на рисунке B
  3. Третий и последний компонент - это просто экран, показывающий ход загрузки и окончательное сообщение

Проблема / Вопрос :

Когда пользователь выбирает файл для рабочей зоны (компонент A) и нажимает «Далее» или «Отправить» (какую бы формулировку я не использовал). Это будет go для Компонента B - для подтверждения правильности значений. Должен ли я просто передавать данные как реквизиты или использовать избыточность при переходе от компонента A к B?

Почему я задаю этот вопрос

Мне интересно о безопасности. Как я могу убедиться, что данные не будут «изменены» между Компонентом A и к тому времени, когда они поступят в Компонент C (последний компонент, куда они загружаются после подтверждения)?

Я проверю интерфейс перед отправкой на сервер - сервер будет находиться на AWS API Gateway с использованием Node.js. На бэкэнде я проверю, прежде чем он попадет в БД.

Достаточно ли того, что я - дон? Есть ли что-то еще, что я должен учитывать, когда он переходит в качестве опоры из Компонента A в Компонент C?

Компонент A

enter image description here

Компонент B

enter image description here

1 Ответ

1 голос
/ 09 апреля 2020

Я не могу вспомнить какие-либо проблемы с безопасностью, которые могут возникнуть при отправке данных из одного компонента в другой.

Я бы порекомендовал вам не использовать Redux для этого, поскольку вы бы усложняли вещи больше, чем просто необходимо .

Могу предположить, что у вас есть родительский компонент, который действует как оболочка для компонентов A и B.

Так что в коде будет что-то вроде этого: 

const ParentComponent = () => {
  const [file, setFile] = useState(null);

  return (
    <div>
      {file ? <ComponentB /> : <ComponentA />} // If there is a file, render B (which is the last step)
    </div>

  )
}

Этот компонент является лишь расплывчатым кодом того, как он будет реализован.

...