时间戳

首页 > 解决方案 > Typescript - React/Redux 显示表格

javascript - Typescript - React/Redux 显示表格

问题描述

我想构建一个 react typescript redux 应用程序以使用提供的 api 端点显示表格https://example.com/users

开发一个包含 4 列 Name、Email、City 和 Company 的表，用来自 api 端点的响应填充行。

我是菜鸟，所以请耐心等待。

1）我需要使用某种数据库来制作表格是吗？（即带有猫鼬的mongoDb）

2)Redux/Redux-Thunk用于存储状态并能够编写返回函数的动作创建者。Thunk 可用于延迟分派的操作或用于条件。

如果我们只是返回数据，不确定使用 Redux 做什么。

同样的情况需要返回 JSON 格式的数据，这种情况下 Thunk 有什么用呢？（硬件分配）

需要返回的示例：

JSON

[{
  "id": 1,
  "name": "Jane Doe",
  "username": "JD",
  "email": "jd@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 425",
    "city": "Dogville",
    "zipcode": "89143-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-555-555-8031 x55555",
  "website": "sample.org",
  "company": {
    "name": "Munder Difflin",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}]

标签： javascriptreactjstypescriptreduxjestjs

解决方案

如果没有人真正为您完成作业，因此放弃学习过程，这个问题非常板，甚至可能无法回答。

将 React/Redux/Typescript/Thunk 设置为初级？祝你好运。

如果您只是从 API 获取数据并将其放在 UI 上的表中，则无需涉及数据库；此外，无需涉及 redux 或 thunk，这些工具更适合人们在大型应用程序中的许多组件之间全球共享状态。

但不要只相信我的话，这里有一些 React 的创建者的话。 https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

在显示表格方面；这是我可以在下面提供的帮助，我提供了一个代码笔，用于生成作业所需的表格；用它作为指导。

https://codepen.io/anon/pen/qzowyP?editors=1111

故意设计它并使它非常小。

goodluck and hope this helps.

编辑：如果您只是从externalapi 获取数据并显示它，则无需涉及数据库，但是如果您希望自己创建此 API，那么显然这会改变事情

推荐阅读