Получить данные из таблицы DynamoDB и отобразить их в приложении React - PullRequest
Новая
       46

Получить данные из таблицы DynamoDB и отобразить их в приложении React

0 голосов
/ 12 января 2020

Я пытаюсь создать что-то вроде планировщика отпуска.

Этот список изначально заполняется в течение 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>

      </>
    );


    }

Я хочу сохранить данные в DynamoDB, если статус PL или WO и удаление из DynamoDB, если статус «P».

Заполните все раскрывающимся списком P и измените только те, которые находятся в таблице DynamodB.

Все поможет. Я видел такие вещи, как «реактивная таблица», «реактивная решетка», но я не собираюсь их использовать.

1 Ответ

0 голосов
/ 12 января 2020

Вопрос слишком широкий ... слишком много проблем, которые вы пытаетесь решить.

Изучите любой пример / учебное пособие, чтобы узнать о «потоке» управляемых данными данных.

  1. Выборка данных и представление визуализации с использованием простых компонентов - сопоставление / преобразование результата (структура БД, например, список листьев) с требованиями к компонентам (массив дней)

  2. Каждый <Status/> обработчик изменений должен обновлять БД, но также обновлять состояние родителя (для принудительного повторного рендеринга - обновлять представление, передавать новые реквизиты дочерним элементам) ... обработчик должен существовать в родительском объекте и передаваться как prop

  3. Каждый <Status/> должен получить больше реквизитов, например date (или день для просмотра календаря), id (запись в БД), state (значение) и использовать их для визуализации представления, передачи в обработчик ... или массива (id, person_id / name, state) для отображения множества [изменяемых] записей в одной ячейке дня

Обновление

Мне нужно сохранить состояние каждая клетка в основном.

Нет, как в БД, вам нужны только не значения по умолчанию.

Таким образом, объект типа {alias1: 1 {value: 'P', вариант: '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, и только измененные компоненты (с измененными реквизитами) перерисовываются.

После этого попытайтесь реализовать выборку и преобразование данных в желаемую структуру состояний. Не забудьте создавать новые объекты как элементы массива (arr[i]) (не изменяйте существующие) во время обновлений [в обработчике] - требуется для принудительного изменения ячеек.

...