在不覆蓋 TypeScript 和 React 中的其他對象的情況下推送數組中的多個對象 - 添加到收藏夾列表

Question

我正在用 TypeScipt 和 React 完成一個天氣應用程序，我需要包含的最后一個功能是能夠將查詢的位置添加到收藏夾列表中。 這是第二頁的“收藏夾”。

使用查詢位置時顯示的卡片上的按鈕將收藏狀態設置為 true。

<button className="add-favorite btn" onClick={() => addToFavoritesHandler()}>Add to Favorites</button>

但是，在搜索新位置時，數組會發生變異。 即使嘗試將新位置添加到您的收藏夾時，它也只會顯示該位置，而不顯示以前的位置。

如果有最喜歡的位置，則在此處繪制。

      {favorites.length === 0 ? (
        <p> Add locations to favorites! </p>
      ) : (
        favorite &&
        arr?.map((location, id) => {
          return (

我只是希望能夠在按下按鈕時將多個位置添加到收藏夾列表中。

此函數處理對數組的推送，並向下鑽取到查詢位置上的按鈕。

const [favorite, setFavorite] = useState(true);
  let favorites: WeatherType[] = [];
  // Easier readability 
  let location = weatherData;

  // Pushing the favorite location into the favorite array
  const addToFavoritesHandler = () => {
    setFavorite(true);
    if (location && favorite && !favorites.find((o) => o === location)) {
      favorites.push(location);
    }
    return favorites;
  };

GitHub 存儲庫 - https://github.com/carbondesigned/granular-ai-assignement-weather-app

謝謝你。

Answer 1

我很快閱讀了存儲庫中的代碼，我注意到favorites數組沒有保存在useState ，我認為這就是問題所在。

這樣，該數組將在每次渲染時重新創建。

如果您更改為：

const [favorites, setFavorites] = useState<WeatherType[]>([]);

並且，在函數addToFavoritesHandler您可以使用以下內容更新favorites ：

setFavorites(favorites)

你應該讓這個工作。