fix small bags and code clearing#2
Conversation
|
|
||
| return ( | ||
| <div className="app"> | ||
| <Header |
There was a problem hiding this comment.
Header в Ract memo, в него передаются функции deleteSelectedDayAllTasks, deleteAllTasks которые создаются при каждом рендере App. То-есть в мемо каждый раз новые функции приходят, он думает что-то то изменилось и рендерит каждый раз, нет смысла юзать memo тогда. ЧТоб функции не создавались каждый раз, нужен useCallback
| import deleteDayTasksSVG from "../../icon/deleteDayTasks.svg"; | ||
| import deleteAllTasksSVG from "../../icon/deleteAllTasks.svg"; | ||
|
|
||
| const Header = React.memo(function Header({ |
There was a problem hiding this comment.
function Header (props) {
...
}
export default React.memo(Header)
|
|
||
| const MyButton = (props) => { | ||
| return ( | ||
| <button { ...props } className={ "myButton-default-style " + props.className }> |
There was a problem hiding this comment.
файл назвать index.js
className выносим за return
| height="25px" | ||
| /> | ||
| </MyButton> | ||
| <ReactTooltip id="deleteThisDay" type="error" effect="solid"> |
There was a problem hiding this comment.
В MyButton можно добавить возможность работы с тултипом
MyButtn
data-tip
data-for="deleteThisDay"
onClick={deleteSelectedDayAllTasks}
className="header-buttons"
tooltip="Delete tasks from this day"
>
|
|
||
| function App() { | ||
| const [todo, setToDo] = useState( | ||
| () => JSON.parse(localStorage.getItem("items")) || {} |
There was a problem hiding this comment.
одинарные кавычки везде кроме когда в пропсы передаем строку, точка с запитаю нигде не нужно только в каких то блоках for (i =0 ; ...)
| updateTaskPosition, | ||
| changeTaskTitle, | ||
| }) { | ||
| const selectedDayTasksId = useMemo( |
There was a problem hiding this comment.
Ты уже это делал в Parent, можно было об оттуда передать, но я говорил уже, лучше б это было так
selectedDay.id
There was a problem hiding this comment.
Прокинул через пропсы. fix
| }} | ||
| > | ||
| <div className="draggable-element"> | ||
| <ToDoItem |
There was a problem hiding this comment.
Если ToDoItem используется всегда с draging, то Draggable туда можно поместить сразу, чтоб в этом файле был только ToDoItem
| setToDo({ ...todo, [selectedDayTasksId]: copySelectDayToDo }); | ||
| } | ||
|
|
||
| function completedTask(task) { |
There was a problem hiding this comment.
Не понятно что функция по названию делает, нет глагола
markTaskAsCompleted
Но тут то еще она не только делает ее завершенной но и наоборот
changeTaskCompletedStatus
Но вообще это все про апдейт task
completedTask, updateTaskPosition, changeTaskTitle
Нужны просто функция updateTask(taskId, changes)
changes это обьект { title: 'Моя задача' }
There was a problem hiding this comment.
Одна функция вместо 3х)) fix
| function completedTask(task) { | ||
| const copySelectDayToDo = todo[selectedDayTasksId].map((element) => { | ||
| if (element.id === task.id) { | ||
| element.isCompleted = !element.isCompleted; |
There was a problem hiding this comment.
Нельзя так делать, ты идешь по таскам и мутируешь уже существующий element, а должен возвращатся новый построенной на инфе из element
if (element.id === task.id) {
return { ...element, isCompleted: !element.isCompleted }
}
There was a problem hiding this comment.
Да ошибка, поверхностно думал что мар вернет новый массив , но вложенные обьекты то останутся привязаными и будут мутироваться. Функция удалена, новая updateTask
| setToDo({ ...todo, [selectedDayTasksId]: copySelectDayToDo }); | ||
| } | ||
|
|
||
| function updateTaskPosition(data, index) { |
There was a problem hiding this comment.
почему index, у таски вроде id есть
2 participants
No description provided.