Переключить цвет кнопки добавлен в избранное в реакции

Question

Я отображаю список элементов, и у пользователя есть возможность добавить элемент в избранное.

Моя проблема в том, что я фиксирую только одно избранное состояние, таким образом, по нажатию одной кнопки,все кнопки элементов (красное сердце внизу) меняют цвет.

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

Вот код кнопки и соответствующий обработчик щелчка:

<Table.Cell textAlign="center">
                    <Button
                      onClick={() => addFavorite(card, props.loggedUser)}
                      bordered
                      color={favorite ? "google plus" : "twitter"}
                      icon={favorite ? "heart" : "heart outline"}
                    />
                  </Table.Cell>

 const addFavorite = (card, user) => {
    console.log("CARD + USER ON CLICK", card, user);
    props.updateUser(card, user);
    setFavorite(!favorite);
  };

При нажатии я отправляю избранное в массив избранных данных пользователя в базе данных, и это успешно работает. (хотя я пока не обрабатываю удаление).

Я также устанавливаю состояние, как показано выше с помощью вызова setFavorite, однако это просто отслеживание одного универсального состояния «избранное», а не состояния «избранное» для каждого. item.

const [favorite, setFavorite] = useState("false");

Что было бы лучшим способом сделать это. Должен ли я добавлять состояние, в котором хранятся все избранное?

У меня есть доступное хранилище / состояние, называемое loggedUser, которое содержит всю информацию пользователя и избранные элементы. Должен ли я провести проверку против этого, может быть?

Спасибо за любую помощь по этому вопросу.

Answer 1

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

const [favorites, setFavorite] = useState("");

useEffect(async ()=>{
  let savedFavorite = await localStorage.getItem('__Fav');
  if(savedFavorite) {
    setFavorite(savedFavorite);
  }
}, [])

Внутри addFavoirte вы можете проверить, находится ли выбранный объект в избранном массиве. Если он там, вы можете просто удалить его и сохранить новый любимый массив в хранилище localals. если он отсутствует в избранном массиве, вы можете просто нажать его и снова сохранить новый массив в локальном хранилище.

Так что теперь, если вы перезагрузите страницу, useEffect извлечет массив saveFavorite и добавит его в массив избранных компонентов.

Answer 2

Favorite - тип логический, поэтому color={favorite ? "google plus" : "twitter"} выполнится, если Favorite - true. Это повлияет на каждую кнопку в компоненте. Вам необходимо сохранить уникальный идентификатор, который можно использовать для идентификации каждой строки таблицы в таблице.

Например, если вы просматриваете данные для создания строк,

data.map((item,index) => {
  <Row>
    <Button 
      key={index} 
      onClick={()=>handleClick(index)}>
      color={favorite==index ? 'red' : 'blue'}/>
  </Row>
})

Теперь в handleClick,

const handleClick = (id:number) => {
  setFavoirte(id);
}

И если пользователь может выбрать несколько избранных элементов, вы можете использовать массивы для favorite.

const [favorite, setFavorite] = useState([]);

const handleClick = (id:number) => {
  setFavoirte([...favorite, id]);
}

data.map((item,index) => {
  <Row>
    <Button 
      key={index} 
      onClick={()=>handleClick(index)}>
      color={favorite.indexOf(index) > 0 ? 'red' : 'blue'}/>
  </Row>
})

Answer 3

Спасибо за отличный вклад. Я как бы придумала ответ, основанный на комбинации ответов. Единственная проблема заключается в том, что хотя избранное добавляется в состояние по щелчку, оно не удаляется, если щелкнуть впоследствии. Также возникла похожая проблема: если я обновлю страницу, все кнопки вернутся к «Вот что у меня есть». Есть идеи как починить?

const [favorites, setFavorite] = useState("");

const addFavorite = (card, user) => {
    console.log("CARD + USER ON CLICK", card, user);
    props.updateUser(card, user);
    setFavorite([...favorites, card.id]);
  };

   {!filteredData
        ? "Sorry No Cards Found"
        : filteredData.map(card => (
            <Table.Row key={card.id}>
                     //////MORE STUFF HERE

                  <Button
                  onClick={() => addFavorite(card, props.loggedUser)}
                  bordered
                  color={
                    favorites.includes(card.id) ? "google plus" : "twitter"
                  }
                  icon={
                    favorites.includes(card.id) ? "heart" : "heart outline"
                  }
                />