从DynamoDB表中获取数据并在React Application中显示它

Question

我正在尝试创建一个假期计划者。

此列表最初填充了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>
    </>
  );
}

问题是：我要存储“状态下拉列表”的值更改时的值，然后再次刷新页面时，该值应保持不变。

状态

  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之类的东西，但我不打算使用它们。

Answer 1

问题过于广泛...您要解决的问题太多。

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

1. 使用简单的组件获取数据和渲染视图-匹配/转换结果（数据库结构，叶子列表）与组件要求（天数数组）

2. 每个<Status/>更改处理程序应该更新数据库，但也要更新父级的状态（以强制重新渲染-更新视图，将新的props传递给子项...处理程序必须存在于父级中并作为prop传递）]]

3. 每个<Status/>应该获得更多道具，例如date（或日历视图的日期），id（数据库记录），state（值），并使用它们来呈现视图，传递给处理程序...或（id，person_id / name，name）的数组在同一天的单元格中呈现许多[可更改]记录

更新

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

否，就像在数据库中一样，您不需要默认值。

所以像{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时应仅显示天数，为单个对象提供一个别名和下拉列表（检查是否为数组），并且当存在[props]数组时更多的[sub]行。
即使数组/状态中的元素数量不应该影响渲染速度。节点在虚拟DOM中进行更新，并且仅重新渲染已更改的组件（具有更改的prop）。 

在此之后，尝试实现获取数据并将其转换为所需状态结构的操作。请记住，在[在处理程序中]更新期间，将新对象创建为数组（arr[i]）元素（不进行突变）-强制重新渲染单元格。