时间戳

首页 > 解决方案 > Reactjs 中的高级设计问题：在发送到后端之前在组件之间传递上传文件数据

javascript - Reactjs 中的高级设计问题：在发送到后端之前在组件之间传递上传文件数据

问题描述

应用程序： 我有一个上传门户，其中包含三个组件 - 请记住，我还没有配置所有组件来工作，我只构建了一个粗略的 UI 布局。

  1. 第一个组件是用户选择文件的位置 - 如图 A 所示
  2. 第二个组件是确认屏幕，其中列出了文件中的某些数据集供用户确认 - 如图 B 所示
  3. 第三个也是最后一个组件只是一个显示上传进度的屏幕和最后一条消息

问题/问题：

当用户选择 dropzone 的文件（组件 A）并单击“下一步”或“发送”（无论我使用哪种措辞）。它将转到组件 B - 以确认值是否正确。现在从组件 A 到 B 时，我应该将数据作为道具传递还是使用 redux？

为什么我问这个问题

我想知道安全性。如何确保数据在组件 A 和到达组件 C（确认后上传的最终组件）之间不会“更改”？

我将在发送到后端之前验证前端 - 后端将使用 Node.js 驻留在 AWS API Gateway 上。在后端，我将在它到达数据库之前进行验证。

我的东东够吗？当它作为道具从组件 A 移动到组件 C 时，我还有什么需要考虑的吗？

组分 A

在此处输入图像描述

B组份

在此处输入图像描述

标签： javascriptreactjssecurity

解决方案

我想不出您将数据从一个组件发送到另一个组件时会遇到任何安全问题。

我建议你不要为此使用 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>

  )
}

这个组件只是一个关于如何实现的模糊代码。

推荐阅读