Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   React нужна помощь (https://javascript.ru/forum/library-toolkit-framework/81247-react-nuzhna-pomoshh.html)

dewembas 31.10.2020 17:24

Огромное спасибо, буду улучшать знания для того что бы больше вникать :)

dewembas 03.11.2020 02:48

Цитата:

Сообщение от Nexus (Сообщение 530261)
dewembas, сделайте макет вашей задачи в любой песочнице, без него непонятно где у вас undefined.

Попрошу у вас ещё подсказку) если не затруднит, подскажите как по онклику на кнопку добавить в избранное, переместить данный фильм на страницу избранного ? Буду благодарен за любую подсказку .:-?

Nexus 03.11.2020 11:57

dewembas,
Цитата:

Сообщение от dewembas
как по онклику на кнопку добавить в избранное, переместить данный фильм на страницу избранного ?

По-хорошему стоит реализовать регистрацию/авторизацию пользователей и сохранить список избранного в БД.

Но чтобы просто "поиграться", список избранного можно хранить в localStorage либо в indexedDB.

Если решите хранить список в IndexedDB, то лучше установите пакет, который поможет с нею взаимодействовать, например LocalForage.

Работать с localStorage можно напрямую, через его API, однако для этого все же лучше написать какую-нибудь, хотя бы самую простую обертку с методами get, set для более просто модифицирования кода в будущем (к слову, LocalForage умеет работать и с localStorage в кач-ве хранилища).

Операции чтения/записи из хранилища лучше делать асинхронными, даже если они выполняются синхронно (как в случае с localStorage), чтобы потом можно было легко изменить хранилище даже на то, операции чтения/записи в которое осуществляются асинхронно.

Если вместе с "меткой" о добавлении фильма в избранное нужно хранить еще какие-либо данные, например дату добавления этого фильма в избранное, то лучше (имхо, лучше для того юзать БД) хранить список избранного не как одну запись со списком идентификаторов в хранилище, а как список ключ-значение (<prefix>-<movie-id> => <some-details>). Т.е. для каждого отдельного фильма добавленного в хранилище создавать ключ в определенном формате (пример формата был выше), значением которого будет дополнительная информация об этом ключе.

dewembas 06.11.2020 03:39

Цитата:

Сообщение от Nexus (Сообщение 530333)
dewembas,
По-хорошему стоит реализовать регистрацию/авторизацию пользователей и сохранить список избранного в БД.

Но чтобы просто "поиграться", список избранного можно хранить в localStorage либо в indexedDB.

Если решите хранить список в IndexedDB, то лучше установите пакет, который поможет с нею взаимодействовать, например LocalForage.

Работать с localStorage можно напрямую, через его API, однако для этого все же лучше написать какую-нибудь, хотя бы самую простую обертку с методами get, set для более просто модифицирования кода в будущем (к слову, LocalForage умеет работать и с localStorage в кач-ве хранилища).

Операции чтения/записи из хранилища лучше делать асинхронными, даже если они выполняются синхронно (как в случае с localStorage), чтобы потом можно было легко изменить хранилище даже на то, операции чтения/записи в которое осуществляются асинхронно.

Если вместе с "меткой" о добавлении фильма в избранное нужно хранить еще какие-либо данные, например дату добавления этого фильма в избранное, то лучше (имхо, лучше для того юзать БД) хранить список избранного не как одну запись со списком идентификаторов в хранилище, а как список ключ-значение (<prefix>-<movie-id> => <some-details>). Т.е. для каждого отдельного фильма добавленного в хранилище создавать ключ в определенном формате (пример формата был выше), значением которого будет дополнительная информация об этом ключе.


Спасибо, решил все таки использовать LocslStorage, но есть опять проблема в масив пушится только один объект, что делать ?

Nexus 06.11.2020 11:21

Записывайте в хранилище не сами объекты, а их идентификаторы.
Локальное хранилище не резиновое, записывая в него объекты вы быстро израсходуете все доступное пространство.

Цитата:

Сообщение от dewembas
Работать с localStorage можно напрямую, через его API, однако для этого все же лучше написать какую-нибудь, хотя бы самую простую обертку с методами get, set

Мой совет по поводу обертки для localStorage вы проигнорировали, ваше право.

Цитата:

Сообщение от dewembas
но есть опять проблема в масив пушится только один объект

Вы записываете в хранилище всегда только один объект, чему тут удивляться?

const favotireMoviesIds = JSON.parse(localStorage.getItem('favorite-movies')) || [];
const markMovieAsFavorite = movieId => {
    localStorage.setItem('favorite-movies', JSON.stringify([...favotireMoviesIds, movieId]));
};

dewembas 13.12.2020 03:17

И вновь здравствуйте, вот опять вернулся к этому проекту, уже второй день нее могу сделать проверку LocalStorage на то что бы фильм добавлялся только один раз, прошу помощи :cray:
Буду признателен , за прошлый ответ большое спасибо, немного забыл поблагодарить :-?
Ссылка на саму страницу где нужно совершить проверку : https://github.com/Dewembas/React-mo...ents/Modals.js

voraa 13.12.2020 07:55

Если бы Вы еще намекнули, какую структуру имеет arr, что такое objLocal, и что делает markMovieAsFavorite (какие у нее параметры)

dewembas 13.12.2020 20:25

Цитата:

Сообщение от voraa (Сообщение 531643)
Если бы Вы еще намекнули, какую структуру имеет arr, что такое objLocal, и что делает markMovieAsFavorite (какие у нее параметры)

const arr=JSON.parse(localStorage.getItem('favorite-movies'))
let objLocal ={
  img: data[openItemIndex]?.poster_path,
  title: data[openItemIndex]?.original_title,
  opis:  data[openItemIndex]?.overview,
  id: data[openItemIndex]?.id,
  language: data[openItemIndex]?.original_language,
  date: data[openItemIndex]?.release_date,
  score: data[openItemIndex]?.vote_average,
}

const favotireMoviesIds = JSON.parse(localStorage.getItem('favorite-movies')) || [];
    const markMovieAsFavorite = movieId => {
    localStorage.setItem('favorite-movies', JSON.stringify([...favotireMoviesIds, movieId]));
};

Вот.

voraa 13.12.2020 21:16

Тогда вот это совсем непонятно

45 else if (arr[objLocal]?.id!==data[openItemIndex]?.id){
markMovieAsFavorite(objLocal)
console.log("dob")
}
Как я понимаю, надо узнать, содержится ли в arr (вернее узнать, что не содержится) объект с id: data[openItemIndex]?.id. Так?
Тогда
if (! arr.find(el => el.id == data[openItemIndex].id) ) {

И это непонятно.
markMovieAsFavorite(undefined)
Зачем туда запихивать лишний элемент undefined? И потом везде таскать ?.

Ну напишите вы чуть больше кода

const markMovieAsFavorite = movieId => {
const a = [...favotireMoviesIds]
if (movieId) a.push(movieId)
localStorage.setItem('favorite-movies', JSON.stringify(a));
}

А какой смысл хранить в localStorage все структуры вместе с текстовыми описаниями? Одних индексов не достаточно? По ним же всегда можно найти нужный объект.

dewembas 14.12.2020 01:44

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


Часовой пояс GMT +3, время: 01:31.