如何不可变地更新数组并将其存储在 React 的本地存储中？

Question

我正在制作一个食谱应用程序。我希望用户能够将食谱添加到收藏夹列表中。涉及 3 个 React 组件。食谱、添加到收藏夹和收藏夹。

配方组件显示有关所选配方的各种详细信息。

AddToFavorites 组件是一个在 Recipe 组件中呈现的按钮。

收藏夹组件是一个列表，显示使用“添加到收藏夹”按钮添加到收藏夹的所有项目。

function Favorites() {
  const [favList, setFavList] = useState(localStorage.getItem('favorites'));
  return (
    <FavPageContainer>
      {favList}
      {favList.map(listItem => {
        <li>{listItem}</li>
      })}
    </FavPageContainer>
  )
}

function Recipe() {
  let params = useParams();
  const [details, setDetails] = useState({});
  const [activeTab, setActiveTab] = useState('summary');
  const fetchDetails = async () => {
    const data = await fetch(`https://api.spoonacular.com/recipes/${params.name}/information?apiKey=${process.env.REACT_APP_API_KEY}`);
    const detailData = await data.json();
    setDetails(detailData);
  }
  
  useEffect(() => {
    fetchDetails();
  }, [params.name]);

  return (
    <DetailWrapper>
        <h2>{details.title}</h2>
        <img src={details.image} alt="" />

      <Info>
        <ButtonContainer>
          <AddToFavorites details={details}/>
          <Button 
            className={activeTab === 'summary' ? 'active' : ''}
            onClick={() => setActiveTab('summary')}>Nutrition Info
          </Button>
          <Button 
            className={activeTab === 'ingredients' ? 'active' : ''}
            onClick={() => setActiveTab('ingredients')}>Ingredients
          </Button>
          <Button
            className={activeTab === 'instructions' ? 'active' : ''}
            onClick={() => setActiveTab('instructions')}>Instructions
          </Button>
        </ButtonContainer>
        {activeTab === 'instructions' && (
          <div>
            <p dangerouslySetInnerHTML={{__html: details.instructions}}></p>
          </div>
        )}
        {activeTab === 'ingredients' && (
          <ul>
          {details.extendedIngredients &&
            details.extendedIngredients.map((ingredient) => (
              <li key={ingredient.id}> {ingredient.original}</li>
            ))}
          </ul>
        )}
         {activeTab === 'summary' && (
          <div>
            <p dangerouslySetInnerHTML={{__html: details.summary}}></p>
          </div>
        )}
      </Info>
    </DetailWrapper>
  )
}

function AddToFavorites(details) {
  const [active, setActive] = useState(false);
  const [favorites, setFavorites] = useState([]);
  const handleActive = () => {
      setActive(!active);
  };

  const handleFavorites = () => {
    handleActive();
    if(active){
      removeFromFavorites();
    } else if(!active) {
      addToFavorites();
  }
};

  const addToFavorites = () => {
    handleActive();
      setFavorites([...favorites, details]);
      console.log(favorites)
      localStorage.setItem('favorites', JSON.stringify(favorites));
  };
 
return (
  <AddToFavBtn className={active ? 'active' : null} onClick={handleFavorites}>
      {!active ? 'Add to favorites' : 'Remove from favorites'}
      <div>
      <BsFillSuitHeartFill/>
      </div>
  </AddToFavBtn>
)
}

到目前为止我尝试做的事情：

• 将 API 数据作为 Recipe 中的“details”属性传递到 AddToFavorites。
• 在 AddToFavorites 中将收藏夹设置为默认为空数组的状态。
• 在AddToFavorites中添加onClick事件以添加到收藏夹btn，该事件调用AddToFavorites()函数。
• 在 AddToFavorites() 函数中，我尝试通过使用展开运算符并将收到的详细信息道具（具有 API 数据）作为新项目添加到状态数组的新副本中，来永久更新收藏夹状态，然后将其存储在本地存储中。

当我将一项添加到收藏夹时，我可以添加一项，也可以添加多次。但是当我转到新食谱添加另一个项目时，它会删除旧项目并重新启动。

几天来我一直在研究它并尝试不同的事情，但我无法弄清楚。

Answer 1

这似乎是共享状态的一个很好的例子。如果您的收藏夹数据在一个位置进行管理，那么在添加、删除或显示时就不会遇到同步问题。

我建议创建一个上下文

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";

const FavoritesContext = createContext({
  favorites: [],
  toggleFavorite: () => {},
  isFavorite: () => false,
}); // default context value

export const FavoritesContextProvider = ({ children }) => {
  const preloadRef = useRef(false);

  const [favorites, setFavorites] = useState(
    JSON.parse(localStorage.getItem("favorites")) ?? []
  );

  // assuming favourites have IDs
  const ids = useMemo(
    () => new Set(favorites.map(({ id }) => id)),
    [favorites]
  );
  const isFavorite = useCallback((id) => ids.has(id), [ids]);

  // sync data on change
  useEffect(() => {
    // skip initial preload
    if (preloadRef.current) {
      localStorage.setItem("favorites", JSON.stringify(favorites));
    }
    preloadRef.current = true;
  }, [favorites]);

  const toggleFavorite = ({ id, image, title, route }) => {
    if (isFavorite(id)) {
      setFavorites((prev) => prev.filter((fav) => fav.id !== id));
    } else {
      setFavorites((prev) => [...prev, { id, image, title, route }]);
    }
  };

  return (
    
      {children}
    
  );
};

// hook helper
export const useFavorites = () => useContext(FavoritesContext);

然后用上下文提供程序包装应用程序的相关部分，例如

只要您需要读取或修改收藏夹，请使用上下文挂钩

// read
const { favorites } = useFavorites();

// modify
const { isFavorite, toggleFavorite } = useFavorites();

---

您还可以使用任何其他形式的状态管理，例如 Redux。