Question

很抱歉，这个问题的措词很奇怪。

这些是我已经完成的步骤：

从NewsAPI获取一系列新闻报道
设置状态并显示在页面上
单击收藏夹图标时，将数组设置为收藏夹状态
在收藏夹组件上，显示收藏的文章。

对于＃5，我试图通过单击位于显示的每个收藏文章上的收藏夹图标来使用户能够删除收藏夹（这在页面/收藏夹中使用网格显示收藏的文章）。我的第一个问题是，当我单击该图标时，该文章将从收藏夹中删除，并且页面重新呈现，并且该文章不再显示，因为它是使用收藏夹进行映射的。我希望用户在离开/收藏夹之前改变主意能够重新收藏。

我对此的解决方案是使用临时的favoriteToDisplay状态填充到收藏夹组件上。这样，收藏夹状态将不会更改，页面也不会重新呈现。

令我惊讶的是，将状态设置为“收藏夹”也更改了“收藏夹显示”。有人知道为什么会这样吗？发生在调用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>
    )
  }

反应：为一个变量设置状态也将设置为另一状态

0 个答案: