-1

这是一个关于 React 应用的技术选择的问题。

我们的 Leaflet 地图是使用 ReactJS 提供的。当我们构建应用程序时，这些层使用来自一堆 CSV、geojson 等的数据进行渲染。这可以加快加载速度，因为我们有很多层，每个层都有很多数据点。

我们希望允许用户通过在 Web 应用程序上提交表单来向地图添加功能，然后在将其添加到地图之前，我们团队中的一个人将手动验证该表单。我们正在寻求尽可能多地自动化这个过程。

我们需要什么样的技术才能做到这一点？人们在这个发送用户数据的“登陆页面”上使用什么技术，因为它在我们将它添加到我们本地的数据库/文件之前等待我们验证它？我们目前的方法是否符合我们的愿景，或者我们是否需要将我们的数据托管在数据库中，例如 sqlite 或 Firebase？

到目前为止，我的理解是 React 是静态的和客户端的，所以我不能从中查询数据库？

4

1 回答 1

1

首先你需要声明状态：

const [value, setValue] = usestate('');
const [error, setError] = useState('');

要执行验证，您可以在服务器中创建一个函数：

const validateInput = (val) => {
  //...do your check here and return  the data if valid (with 200 response code) or an error with a message what is wrong with 400 code
}

此外，您可以在前端进行验证：

const handleSubmit = () => {
   //... do checks on `value` state parameter, if all is OK, send request to server, else setError() with reason and show it in some form of alert to user
}

然后是一个基本形式：

<form onSubmit={handleSubmit}>
  // Some Alert Component
  <Alert hidden={!error} value={errror} />
  <input value={value} onChange={e => setValue(e.target.value)}/>
  <button type='submit'></button>
</form>

在服务器上，您可以编写一个首先检查然后添加到 DB 的函数（下面的代码在带有 TS 的节点中）：

export const addSongToDB = async (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  try {
    // Server-side validaiton
    if (!req.body.URL || !req.body.name)
      return next({ status: 400, message: 'Song URL and name are mandatory' });

    const newSong = await db.Song.create(req.body);

    const {
      id,
      name,
      URL,
      posterURL,
      artist,
      album,
      composer,
      genre,
      year,
      playedOn,
    } = newSong;

    return res.status(200).json({
      id,
      name,
      URL,
      posterURL,
      artist,
      album,
      composer,
      genre,
      year,
      playedOn,
    });
  } catch (error) {
    console.log(error);
    // This next() goes to the error handler of the server
    return next({
      status: 500,
      message: error.message,
    });
  }
};

我在后端创建了一个通用错误处理程序，以改善前端开发人员的生活：

const errorHandler = (
  error: CustomError,
  req: Request,
  res: Response,
  next: NextFunction
) =>
  res.status(error.status || 500).json({
    error: {
      message: error.message || 'Oops.. something went wrong!',
    },
  });

export default errorHandler;
于 2021-03-04T04:15:58.210 回答