reactjs - 从 DynamoDB 表中获取数据并将其显示在 React 应用程序中

问题描述

我正在尝试创建类似于休假计划的东西。

此列表最初填充 31 天，例如：

var alias_list = [., . , ......]
 var days = ['1','2','3',...'31']
export default class CalenderView extends React.Component {
  constructor(props) {
  super(props);

  }

  componentDidMount() {
  var DynamoDB_API_ENDPOINT = 'https://m....***z5l.execute-api.us-east-1.amazonaws.com/Test/'

  fetch(DynamoDB_API_ENDPOINT)
    .then(res => res.json())
    .then(
      result => {

        type_of_leave = result.body.type
        alias_on_leave = result.body.alias
        stats_of_leave = result.body.status
        date_of_leave = result.body.date

      } 
    )
    // Set state



}
render() {
    return (
      <>
      <Table striped bordered hover variant="dark">

  <thead>

  <tbody>
  {
    alias_list.map((alias, sl_no) => {

        return(
          <tr>
          <td>{sl_no+1}</td>
          <td>{alias}@</td>
          {

            days.map((date,index)=>{

                return(
                      <td>  <Status alias={alias} date={date} value={'P'} variant={'success'}/> </td>
                )
            })
          }
          </tr>
        )
  })
  }


  </tbody>
  </Table>
    </>
  );
}

问题是：我想存储 Status Dropdown 的值何时更改，然后再次刷新页面，该值应该保留。

地位


  render() {

    if(this.props.date!=null){
      return (
        <>
        <Dropdown  size="sm">
        <Dropdown.Toggle size="sm" date={this.state.date} variant={this.state.variant} id="dropdown-basic">
        {this.state.value}
        </Dropdown.Toggle>

        <Dropdown.Menu size="sm">

          <Dropdown.Item eventKey='P' onSelect={()=>this.setP()}>P</Dropdown.Item>
          <Dropdown.Item eventKey='PL' onSelect={()=>this.setPL()}>PL</Dropdown.Item>
          <Dropdown.Item eventKey='WO' onSelect={()=>this.setWO()}>WO</Dropdown.Item>
        </Dropdown.Menu>
        </Dropdown>

      </>
    );


    }

如果状态为 PL 或 WO，我想将数据存储在 DynamoDB 中，如果状态为“P”，我想从 DynamoDB 中删除。

使用 P 下拉列表填充所有内容，并仅更改 dynamodb 表中的内容。

任何事情都会有所帮助。我看到了诸如 react-table、react-grid 之类的东西，但我不打算使用它们。

标签： reactjsreact-nativereact-reduxamazon-dynamodbreact-table

解决方案

问题太宽泛了……您要解决的问题太多。

探索任何待办事项示例/教程以了解反应数据驱动的“流程”。

使用简单的组件获取数据和渲染视图 - 匹配/转换结果（DB 结构，叶子的 fe 列表）与组件要求（天数组）
每个<Status/>更改处理程序都应该更新数据库但也更新父级的状态（强制重新渲染 - 更新视图，将新道具传递给子级）......处理程序必须存在于父级中并作为道具传递
每个人都<Status/>应该获得更多的道具，fe date（或日历视图的日期），id（数据库记录），state（值）并使用它们来渲染视图，传递给处理程序......或（id，person_id/name，state）的数组来渲染同一天单元格中的许多[可变]记录

更新

我基本上需要存储每个单元格的状态。

不，就像在 DB 中一样，您只需要不需要默认值。

所以像 {alias1: 1 { value: 'P', variant: 'success'}, 2:{}, 3{}.......}, alias2{1:{}...... } 可能有帮助。但这将是 no_of_alias * 31 * 3 值存储在状态本身中，它使页面非常慢。我需要一种存储和显示每个单元格状态的好方法（别名、日期）。

31 个元素的数组就足够了。它们中的每一个都可以是空的（未定义的）、单个对象或数组。模拟状态，例如：

let arr = []
arr.length = 31
arr[5] = { db_key: 'some key', alias: 'one', value: 'PL' }
arr[15] = [
  { db_key: 'some key#2', alias: 'one', value: 'PL' },
  { db_key: 'some key#3', alias: 'two', value: 'WO' }
]

只需渲染 [使用.map] <Status day={i+1} content={arr[i]} key={i} changeHandler= /> （variant可以从值派生 - 我猜），日期

<Status/>当数据为时，组件应仅呈现天数undefined，单个对象的别名和下拉列表（检查是否不是数组）以及当数组 [in props] 存在时的更多 [子] 行。

即使数组/状态中的数千个元素也不应该影响渲染速度。节点在虚拟 DOM 中更新，只有更改的组件（带有更改的道具）才会重新渲染。

在此之后尝试实现获取数据并将其转换为所需的状态结构。请记住在更新 [in handler] 期间将新对象创建为数组 ( arr[i]) 元素（不改变现有的） - 强制单元格重新渲染是必需的。

reactjs - 从 DynamoDB 表中获取数据并将其显示在 React 应用程序中

问题描述

解决方案

更新

推荐阅读