Реакция: установка состояния для одной переменной также установка другого состояния

Question

Извините, если вопрос странно сформулирован.

Итак, вот какие шаги я выполнил:

1. получить массив новостных статей из набора NewsAPI
2. состояние и отображение на странице
3. при щелчке по избранному значку, установите массив в избранном состоянии
4. для компонента избранного, отобразите избранные статьи.

для # 5 я пытаюсь дать пользователю возможность удалить избранное, нажав на значок избранного, расположенный на каждой отображаемой избранной статье (это на странице / избранном с использованием сетки для отображения избранных статей). Моя первая проблема заключается в том, что когда я нажимаю на значок, статья удаляется из избранного, страница перерисовывается и статья больше не отображается, потому что она отображается с использованием избранного. Я хочу, чтобы у пользователя была возможность повторного добавления в избранное, если он передумал, прежде чем покинуть /flected.

Мое решение для этого состоит в том, чтобы использовать временное состояние FavoritesToDisplay для заполнения компонента избранного. Таким образом, состояние избранного не изменится, а страница не будет отображаться повторно.

К моему удивлению, установка состояния в избранное также изменяет избранное для отображения. Кто-нибудь знает, почему это происходит? это происходит при вызове addOrRemoveFavorite.

const [favorites, setToFavorites] = useState([])

const Favorites = () =>{
    const [favoritesToDisplay, setFavoritesToDisplay] = useState([])

    useEffect(() => {
      document.body.classList.add('show-overflow')
      setFavoritesToDisplay(favorites)
    }, [])

    const addOrRemoveFavorite = (i) =>{
      setToFavorites(favorites.filter(favorite => favorite !== favoritesToDisplay[i]))
    }

    return(
      <div>
        <h1 id="favorites-page-header">Favorites</h1>
        {favoritesToDisplay[0] && <div id="news-cards-container">

          {favoritesToDisplay.map((card, index) => (<section className="news-card" key={card.url} id={index}>
            <div id="card-top-container" style={backgroundSettings(card.urlToImage, "center/cover no-repeat ")}>
              <div id="bookmark-icon-container">
                <i id="card-favorite" className="material-icons" onClick={() => addOrRemoveFavorite(index)}>favorite</i>
              </div>
            </div>
            <div id="card-info-nav">
                <div id="card-info-container">
                  <h2 id="card-title">{card.title}</h2>
                  <div id="card-source-author-container">
                    <h3 id="card-source-and-author">{card.source.name} - {card.author}</h3>
                    <h4 id="card-date">{formatDate(card.publishedAt)}</h4>
                  </div>
                </div>                
                  <div id="card-button-container">
                    <a href={card.url} target="_blank" rel="noreferrer noopener">
                      <i className="material-icons">import_contacts</i>
                      <span>Read More</span>
                    </a>
                  </div>
            </div>
          </section>))}

        </div>}
      </div>
    )
  }