31Vector31 / react-training

Hooks, Axios, HOC, Redux, Context, Reselect, Router.
0 stars 0 forks source link

review guest list #2

Closed shevchuknine closed 2 years ago

shevchuknine commented 2 years ago

https://github.com/31Vector31/react-training/blob/17e54210e5b08b500bad03f75c294da7333206df/src/GuestList/GuestList.js#L9 ошибочное поле в состоянии компоненту GuestList нет нужды хранить у себя в состонии имя, возраст и пол гостя, это необходимо делегировать форме чтобы не усложнять структуру компонент https://github.com/31Vector31/react-training/blob/17e54210e5b08b500bad03f75c294da7333206df/src/GuestList/GuestList.js#L17 старайся использовать деструктуризацию объектов для доступа к полям, так код будет выглядеть заметно чище https://github.com/31Vector31/react-training/blob/17e54210e5b08b500bad03f75c294da7333206df/src/GuestList/GuestList.js#L18 в React-приложениях преимущественно используется принци имутабельности, старайся его придерживаться при работе со структурами данных https://github.com/31Vector31/react-training/blob/17e54210e5b08b500bad03f75c294da7333206df/src/GuestList/Table.js#L5 метод sort мутирует массив guests, изменяя текущее значение состояния без его ререндеринга. такое поведение нежелательно внутри приложения, потому перед сортировкой стоит сделать копию состояния чтобы не мутировать основное. обрати внимание, что после этой модификации для досутпа к нужному элементу в методе guestCame будет недостаточно индекса _ https://github.com/31Vector31/react-training/blob/17e54210e5b08b500bad03f75c294da7333206df/src/GuestList/Table.js#L6 ты можешь сформировать колбек на этом уровне, чтобы не передавать проп index вниз

shevchuknine commented 2 years ago

https://github.com/31Vector31/react-training/blob/6187382c2056ade00e2f0b7b49c0e7a65d2e629d/src/GuestList/Form.js#L31 не забывай про деструктуризацию _ https://github.com/31Vector31/react-training/blob/6187382c2056ade00e2f0b7b49c0e7a65d2e629d/src/GuestList/Form.js#L22 return здесь не возвращает ничего, можно игнорировать. передавать this.state целиком для дальнейшей обработки неверно по нескольким причинам:

  1. структура state может поменяться, но этот обработчик ты не изменишь, таким образом передаваться выше начнет то, что не должно туда попадать (новые свойства в state)
  2. если перед передачей выше у тебя будет какая-либо синхронная операция, которая займет времени больше, чем обновление состояния на предыдущей строке, то вверх полетит уже обновленное состояние (с пустыми данными). попробовать можешь отложив вызов saveGuest здесь с помозью setTimeout. 1000 милисекунд вполне достаточно