小编mar*_*vic的帖子

在 Next.js api 处理程序中组织代码的最佳实践是什么？我看了这个视频，他将所有 REST 路线放在两个文件中：

1. pages/api/users/index.ts处理所有不需要的id操作GET /api/users - get all usersPOST pages/api/users - create a new user

2. pages/api/users/[id].ts处理所有需要idso GET api/users/1 - get user by id、PUT /api/users/1 - update user和 的操作DELETE /api/users/1 - delete a user

这意味着大量代码将进入 2 个文件并由一条switch case语句处理。所有这些代码应该如何组织？

每个case语句都应该有自己的try catch块来处理数据库调用，这会大量重复，我可以将单个语句try catch全部封装起来switch，但这会包装很多不必要的代码，也许每个语句都case需要不同的处理？我可以将 single 放在try catch高阶函数中并用它包装每个 case 块，但我不确定这也很好吗？

另外，稍后我将需要使用中间件来保护一些路由withProtected，withRole …

我尝试结合react-image-gallery使用react-image-magnify以获取具有放大预览效果的画廊，并且根据react-image-gallery文档我将MyReactImageMagnify组件传递给组件上的renderItem道具，ImageGallery但右侧没有放大的图像。

这是带有放大功能的图库的样子https://www.amazon.com/Samsung-MicroSD-Adapter-MB-ME128GA-AM/dp/B06XWZWYVP

这是迄今为止我所拥有的代码和盒子https://codesandbox.io/s/goofy-lumiere-gk1y1

class MyImageGallery extends Component {
  myRenderItem() {
    return <MyReactImageMagnify {...this.props} />;
  }

  render() {
    const properties = {
      thumbnailPosition: "left",
      useBrowserFullscreen: false,
      showPlayButton: false,
      renderItem: this.myRenderItem.bind(this),
      items: [
        {
          original: "https://placeimg.com/640/480/any/1",
          thumbnail: "https://placeimg.com/250/150/any/1"
        },
        {
          original: "https://placeimg.com/640/480/any/2",
          thumbnail: "https://placeimg.com/250/150/any/2"
        },
        {
          original: "https://placeimg.com/640/480/any/3",
          thumbnail: "https://placeimg.com/250/150/any/3"
        }
      ]
    };

    return <ImageGallery {...properties} />;
  }
}

编辑：亚马逊只是为了说明“向右放大”。我制作了另一个带有 2 列网格的代码和框，您可以看到普通<MyReactImageMagnify />组件如何工作和<MyImageGallery />不工作。 …