Объективно и кратко)Что бы не затупил на собеседовании)

Всем привет, такой вопрос. У меня есть лист данных которые я получаю от api. Мне надо отмапать их и рядом с каждой записью вывести типо сердца и реализовать функционал типо like/unlike. Сижу туплю

Всем привет, такой вопрос. У меня есть лист данных которые я получаю от api. Мне надо отмапать их и рядом с каждой записью вывести типо сердца и реализовать функционал типо like/unlike. Сижу туплю

Почитай в нете про это, а вот что собес пройдешь, сомневаюсь

Внутри цикла рисуй свою фигню и сердце, только индекс передавай на сердце что бы понимать что лайкаешь

Можно ли использовать такую архитектуру для реакт приложений ?

Внутри цикла рисуй свою фигню и сердце, только индекс передавай на сердце что бы понимать что лайкаешь

У меня еще одна проблема. Внутри цикла у меня 2 поля. И если выбираю лайк, то срабатывает и второе, как это можно исправить? Собственно из-за этого и пошла первоначальная проблема с этим

что за бред, а как должны сохраняться лайки? локально? только в одну сессию?

Да, локально. Поэтому и ломаю голову (

но не отображает вкладку с реактом

перезапустить devtools, обновить страницу

Эм.... Каждый объект из массива закидываешься в компонент. Который будет рисовать ui по данным. И хранить в стейте состояние лайка

У меня 2 массива. Один массив с объектами с api(Было бы конечно просто если там было такое поле). В другом массиве я храню индексы лайков в соответсвии с первым массивом. Не могу додумать

А зачем тебе второй массив?

Чтобы хранить например индекс того объекта на который я лайк нажал. Думал через includes проверять и выдавать результат

бррр, не понимаю твою боль. ты сам усложняешь себе все. сек, сейчас накатаю тебе

И так у нас есть список моделей, которые мы хотим нарисовать и добавить возможность "лайкать" записи. Вариант номер ван: Каждый объект акамулирует в себе модель (с апи) и состояния ui (лайк не лайк) [dataList.map(model => <Component model={model} />) class Component extends React.Component { state = { isLike: false } render() { return данные модели + лайк + триггер на изменение состояния isLike } } Этого достаточно для твоей задачи. Но мы не можем сохранять выбранные лайки вне текущей сессии. Наверное поэтому ты хочешь хранить ассоциативный массив с ключом (идетификатор записи) и значением лайк или не лайк. Тогда у нас есть две модели: dataList - список моделей с апи. [{ id, title, ...}] likesList - сохраненные лайки на записи [{ id, isLike }] .... тут тьма вариантов реализации. Давай попробуем написать самый "понятный" вараинт. Нам нужно получить список данных для вывода и наш лист выбранных (залайканых) записей. co```nst computedList = dataList.reducer((result, model) => { // 1. берем только нужные данные для ui const { id, title } = model; // 2. ищем есть ли для данной записи лайк // я тут макс сокращаю. const like = likesList.find(item => item.id === id) || { id, isLike: false}; // собранную модель добавляем в список для рендера result.push({ id, title, isLike }); return result; }, []) р```едьюсером проходим каждую запись, из нее вынимаем нужное + добавляем данные из likesList. Если нет лайка для записи, значит создаем дефолтный. Теперь этот список должны отрисовать, и добавить метод изменения лайка. У нас будет ид записи и состояние лайка. И обновляем likesList который где то выше вместе с dataList Этот вариант понятен, но мне не нра. Но для начала пойдет. как то так, с телефона не удобно теперь что именно не понятно. Как я понял это соединить список моделей для рендера и какой то список где мы храним лайки для моделей

То есть, если я правильно понял, собрать свой собственный массив с объектами и вставить туда нужные поля и потом отоброжать?

разработчик не умеющий в скриншоты это прям вообще топ 🤦‍♂️

разработчик, не понимающий, что другой разработчик может сидеть в телеге с телефона это прям ваще топ

а с компа типа нереально залогиниться чтоб скриншот кинуть? Это вообще топ. Давайте ещё топов перечислим

качать клиент на комп, туда логиниться, чтобы тебе предоставить именно скриншот это вообще топ

предположение что никто не попросит код текстом, из-за чего придётся всё равно качать и логиниться это вообще топ

А не подскажете, где можно найти исходные коды хорошо написанных приложений на реакте?

А не подскажете, где можно найти исходные коды хорошо написанных приложений на реакте?

А не подскажете, где можно найти исходные коды хорошо написанных приложений на реакте?

@skywalker587 так а как понять, где круто написано, а где так себе?

@skywalker587 так а как понять, где круто написано, а где так себе?

@skywalker587 так а как понять, где круто написано, а где так себе?

@faergeek А что ты скажешь об этой архитектуре ?

вот это самый адекватный варик. Разве что я бы даже обошёлся без components и images, если там конечно не много файлов прям

получается нужно вынести images, и components в app ?

Почему react hooks не хочет перерисовывать по клику другой компонент?) Кто сталкивался

не. Ну во-первых "нужно" тут не уместное слово)) Как хочешь так и делай. А во-вторых я имел ввиду просто один уровень вложенности срезать. То есть вместо catalog/components/Aa.js просто catalog/Aa.js. Ну и для файлов я бы юзал нижний кэмелКейс всегда. Но в общем это дело вкуса. И можно использовать это как есть, а на то что я ща написал забить)

Стейт изменяется, я вижу по логам

Через пропсы передаю функцию и забираю индекс колбеком

Так) Object.assign и переписать?

ну насколько я знаю в папке components хранятся тупые компоненты которые можно потом переиспользовать повторно

Стейт изменяется, я вижу по логам

в зависимости от того где их переиспользовать, их можно хранить в общей папке, например. А можно прям рядом с местами использования. В общем я бы не парился так сильно. Это можно именем файла даже решить)

а в файле store.js нужно комбайнить все редюсеры, я правильно понял ?

Т.е. мутабельность тебя не смущает?

опять же, вычеркни слово "нужно" в таких обсуждениях))) Можно всё хоть в одном файле писать, если это удобно и технических проблем не вызывает) Кто-то комбайнит там где стор создаёт, кто-то заводит отдельный файл, потому что его можно потом перезагружать на горячую, не теряя стэйта или вообще переприменяя все экшны. Тут нет серебряной пули

Просто можно такое намудрить что любой ужаснется :)

ну если сам в итоге ужаснёшься и исправишь, значит растёшь))) А так ужаснуться можно хоть идеальному коду, ибо он чужой, а значит гавно априори)))