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

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

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

使用简单的组件获取数据并渲染视图-将结果（数据库结构，叶子列表）与组件需求（天数数组）匹配/转换
每个<Status/>更改处理程序都应该更新数据库，但也要更新父级的状态（以强制重新渲染-更新视图，将新的prop传递给子项）...处理程序必须存在于父级中并作为prop < / p>
每个<Status/>应该获得更多道具，例如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= />（{{1}可以从值中得出-我想），日期

variant组件应在数据为<Status/>时仅显示日期，单个对象的一个别名和下拉列表（检查是否为非数组），以及当存在[props]数组时更多的[sub]行。

即使数组/状态中的元素数量不受影响，渲染速度也不会受到影响。节点在虚拟DOM中更新，并且仅重新渲染已更改的组件（具有更改的prop）。

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

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

1 个答案:

更新