Вопрос №57405 от пользователя Аркадий Флитман в уроке «React Redux», курс «JS: Redux (React)»

Аркадий Флитман

В учительском решении непонятен вот этот момент:

// removed

а конкретнее - конструкция = (id) => () => {.

Да, я вижу, что если ее убрать и сделать так, как понятно - = (id) => { - то возникает ошибка:

Warning: Cannot update a component (Connect(Tasks)) while rendering a different component (Tasks)., а также данные попадают в стейт и сразу из него и удаляются.

Но почему и как это работает, и почему помогает добавление лишнего => () =>, абсолютно непонятно.

2 0

Анна Новикова

Это не лишнее. Смотрите, => () => { ... some code ...} первая стрелочка возвращает функцию. Вот эту фкнкцию - () => { ... some code ...}. Вы в обработчик это передаёте? В обработчики событий должна попадать функция-коллбэк, а не её результат, а ещё вам надо, чтобы функа ваша в хэндлере знала что-то про id.

Если вы напишете так

const handleRemoveTask = (id) => {
    dispatch(removeTask(id));
 };

И потом сделаете так

onClick={handleRemoveTask(someId)}

Ну потому, что вам же надо в handleRemoveTask передать id , то handleRemoveTask(someId) вам не функцию вернёт, а её результат. А вам в обработчик надо передать функцию, которая исполнилась бы при срабатывании события.

Если написать так

// removed

То вызов handleRemoveTask(someId) вернёт вам анонимную функцию, которая по замыканию будет знать ещё и про айдишник.

Поконсольложьте и посмотрите, что вам вернёт handleRemoveTask(someId) в первом случае (как у учителя) и во втором без "лишних" скобочек. И сразу поймёте, что вам нужно коллбэк-функцию возвращать, если хотите делать вызов функи someFunc() в обработчиках.

То, что написал учитель, это аналог вот такой конструкции. Со стрелочными это просто тяжеловато уложить в голове в первый раз, но потом нормально пойдёт.

function(id) {
return function() {
     ... some code with id ...
    }
}
2

Аркадий Флитман

Спасибо, теперь все понятно :)

1

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
27 октября 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
27 октября 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
27 октября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
27 октября 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
27 октября 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
27 октября 5 месяцев