Как добавить свойство к элементу массива в React Js?

Question

[Andrew E]

Есть api, откуда беру массив с объектами. Возникла идея реализовать типа "лайки" или избранного. Чтобы кнопочку нажали, сохранилось и, или фильтр сделать или вывести лайкнутые на отдельную страничку.

Коротко: не получается сделать дизлайк, по нажатию на лайкнутую кнопку.

Набросал свой приложение тут:
https://codesandbox.io/s/beautiful-forest-kr23mt?f...

Получаю массив данных:

let [cards, setCards] = useState([])

	useEffect(() => {
		fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Alcoholic')
			.then(response => response.json())
			.then(data => setCards(data.drinks))
	}, [])

Создал колбэк от кнопки, которая добавляет к карточкам свойство isLike c значением true.

const like = (id) => {
		setCards(cards.map(c => (c.idDrink === id) ? { ...c, isLIke: true } : c))
	}

Делаю проверку в svg и крашу его в нужный цвет. Т.е. изменил данные и перекрасил ui в соответствии.

fill={el.isLIke ? 'red' : '#fff'}

Но проблема в том, что при повторном нажатии на кнопку, которая уже покрашена, ничего не происходит. Как я понял из-за того, что изначально в массиве нет свойства isLike.

Пытаюсь первоначально добавить к массиву это свойство, кнопка перестает работать. Словно перетирается действие колбека. Скорее всего код ниже ужасной кривой, я просто пока не знаю как сделать иначе. Ощущение что больше никто с этой проблемой не сталкивался, потому что гугление ни к чему особо не привело.

let [cards, setCards] = useState([])

	useEffect(() => {
		fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Alcoholic')
			.then(response => response.json())
			.then(data => setCards(data.drinks))
	}, [])

	cards.map(c => c.isLIke = false)

	const like = (id) => {
		setCards(cards.map(c => (c.idDrink === id) ? { ...c, isLIke: true } : c))
	}

Как я вижу решение своей задачи:
1. Поменять как-то изначальный массив, добавив ему свойство isLIke: false и работать с ним.
2. Переписать/ доболнить функцию колбека от кнопки.

Comments

[WbICHA]

Как я понял из-за того, что изначально в массиве нет свойства isLike.

Неправильно понимаешь. Ты вообще ничего в массиве не меняешь при повторном нажатии.

[Andrew E]

WbICHA, ну если предварительно не добавлять свойство в объекты, то кнопка работает, но один раз на лайк. Если предварительно добавить, то ничего не меняется. Не понимаю почему

Answer 1

[Andrew E]

Решил следующим образом

let [cards, setCards] = useState([])
	let [filter, setfilter] = useState(false)

	useEffect(() => {
		fetch('https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Alcoholic')
			.then(response => response.json())
			.then(data => setCards(data.drinks.map(c => !c.isLike ? { ...c, isLike: false } : c)))
	}, [])

	const like = (id) => {
		setCards(cards.map(c => (c.idDrink === id) ? { ...c, isLike: !c.isLike } : c))
	}

Т.е. добавил нужное мне свойство еще в then.

Comments

[WbICHA]

Т.е. добавил нужное мне свойство еще в then.

Круто. Только это работает не по этой причине.

[Andrew E]

WbICHA, расскажи, если не трудно. Любой информации и мнению буду рад ))

[WbICHA]

Andrew E, сам разбирайся. Верни назад .then(data => setCards(data.drinks)) и смотри. Логи добавь, если не понимаешь. Дебаж. Без этого навыка дальше идти нет смысла.

Answer 2

[szQocks]

По хорошему с бэка уже должно прилетать этой свойство, а не на клиенте его создавать. - реализуй это.

На клиенте просто красишь свгшку в нужный цвет, в зависимости от значения isLike, когда пользователь нажимает лайк - отправляешь запрос в бд, где меняешь данные, если запрос прошёл успешно, изменяешь на клиенте в массиве поле. ( не важно true или false ) - суть одна.

проблема решена

Comments

[Andrew E]

Это да, но в данном случае с бэка не приходит, бэк этот менять я не могу и хочу найти решение данной задачи. Пока идея это делать две кнопки лайк и дизлайк.

[szQocks]

Andrew E, если нет доступа к бэку, забудь о лайках которые бы хранились в бд.

Тогда как вариант делать из localStorage хранилище для лайках, но это будет работать только локально и для каждого пользователя, и каждый пользователь, будет видеть лишь свои лайки - если такой результат устраивает - вперед.

[WbICHA]

Andrew E, но в любом случае просто так менять массив данных с бека вот вообще нестоит. Храни в отдельном объекте свойства ид-булин и уже этот объект меняй.

[Andrew E]

WbICHA, ну вот да, знаю что если нужно менять массив, надо скопировать и менять копию. Но у меня не получается. Если пытаюсь добавить свойство и положить в новый массив, получаю тупа массив из слов 'dislike'

let changeCards = cards.map(c => c.isLIke = 'dislike')
	console.log(changeCards) // (100) ['dislike', 'dislike', 'dislike',]

А если не класть в переменную, то все ок добавляется. Не понимаю...

[Andrew E]

szQocks, ну даа, тут локальная история. Это не коммерческий проект, всё ради научного любопытства и тренировки и понимания как всё работает. )