如何使用状态和useEffect来动态渲染数据

185 阅读2分钟

我正在完成Flatiron学校软件工程项目的第9周(共15周)。随着我们对Ruby的介绍接近尾声,我和一个同学建立了一个简单的网络应用程序,允许用户根据他们可能访问的城市访问一个音乐会或饮食店的数据库。为此,我们使用Ruby、Active Record和Sinatra建立了一个带有关联的数据库,并使用Javascript和React建立了一个前端UI。

我们项目中我最喜欢的一个方面是我们选择如何呈现我们的数据。我们想动态地显示来自两个不同表格/模型的数据。由于需要一种方法让用户区分他们将看到的数据,我们创建了导航栏和两个按钮:

Image description

点击导航栏的链接或按钮会将一个状态(attractionType)设置为一个特定的值。这个值将代表一个对应的端点,以获得所需的数据:

Image description

导航栏的链接被赋予了对应于所需数据的相应端点的值:

Image description

这是由我们在Ruby/Active Record/Sinatra的后台设置控制器的方式实现的。 下面是几个带有 "音乐会 "或 "餐厅 "端点的GET请求:

Image description

Image description

插值变量,即被称为 "attractionType "的状态,是一个动态的端点。它根据用户的操作而改变。因此,我们可以在这个变量的值变化时访问不同的数据。

有效使用useEffect是这个过程中的另一个关键步骤。它允许网络应用动态地、准确地运行。只要useEffect的第二个参数发生变化,useEffect就会运行。将这个 "状态片"(attractionType)作为useEffect的第二个参数,要求useEffect的主体在第二个参数/状态变化时重新运行。当状态发生变化时,一个新的GET/fetch请求被发送,不同的显示数据被设置:

Image description

条件性渲染是很强大的。在我们的网络应用中,一个状态(attractionType)不仅在功能上决定了哪一组数据被渲染,而且还决定了哪一个相应的组件被渲染:

Image description

我们甚至把它用于其他的前端目的,比如哪个标题会被显示:

Image description

条件性渲染很常见,因为它很有用而且是动态的。在很多情况下,我们需要根据用户的操作来渲染/访问不同的数据,包括但不限于点击一个链接。利用状态是创建动态端点的一个简单而单一的解决方案。从这些端点我们可以执行无数的CRUD动作。同时,使用相同的 "状态片",我们能够有条件地将数据和元素/组件渲染到前端。