react（＆＃x2b; typecript）组件在更新上下文时不重新启动

Question

我有一个lainingitem组件，该组件使用react.Context获取并将信息设置为/从本地存储中设置。

我要实现的目标是，当组件更新上下文（和本地存储）时，我希望它使用新信息来启动，以便它更新本地按钮的状态。

问题是，尽管上下文似乎已更新以及本地存储的内容，但该项目没有启用。 （但是，当我刷新页面时，我可以看到按钮已更改状态，但是，它表明它可以从上下文中得出这些信息

。 ，我非常感谢您的帮助:)

上下文提供商设置

type FavoritesContextType = {
  favorites: Favorites;
  updateFavorites: (category: StorageCategory, item: string) => void;
};

export const FavoritesContext = createContext<FavoritesContextType>(
  {} as FavoritesContextType
);

const FavoritesProvider: FC = ({ children }) => {
  const [favorites, setFavorites] = useState<Favorites>(
    getFromLocalStorage(SOME_CONSTANT)
  );

  const updateFavorites = (category: StorageCategory, item: string) => {
    updateLocalStorage(category, item);
    setFavorites(favorites);
  };

  return (
    <FavoritesContext.Provider value={{ favorites, updateFavorites }}>
      {children}
    </FavoritesContext.Provider>
  );
};

export const useFavoritesContext = () => useContext(FavoritesContext);

app.tsx

export const App = () => {
  return (
    <FavoritesProvider>
      {/* Some routing wrapper and a few routes each rendering a component */}
      <Route path="/launches" element={<Launches />} />
    </FavoritesProvider>
  )

启动.tsx fairs

export const LaunchItem = ({ launch }: LaunchItemProps) => {
  const { favorites, updateFavorites } = useFavoritesContext();
  const [isFavorite, setIsFavorite] = useState(false);

  useEffect(() => {
    if (favorites) {
      setIsFavorite(
        favorites.launches.includes(launch.flight_number.toString())
      );
    }
  }, [favorites]);

  return (
    {/* The rest of the component, irrelevant */}
    <FavoriteButton
      isFavorite={isFavorite}
      updateFavorites={() => {
        updateFavorites(
          StorageCategory.Launches,
          launch.flight_number.toString()
          );
       }}
   />
  )

faivybutton.tsx

export const FavoriteButton = ({
  isFavorite,
  updateFavorites,
}: FavoriteButtonProps) => {
  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
    e.preventDefault();
    updateFavorites();
  };

  return (
    // Using Link vs a Button to be able to preventDefault of parent Link
    <Link
      onClick={handleClick}
    >
    {/* The rest of the component, irrelevant */}

Answer 1

似乎在您的updateFavorites函数中，您正在调用setFavorites，并传递在现有fairting> fairite值中。尝试将您的updateFavorites函数编写为：

  const updateFavorites = (category: StorageCategory, item: string) => {
    updateLocalStorage(category, item);
    setFavorites(getFromLocalStorage(SOME_CONSTANT));
  };

您可以通过其他方法确定将哪种值传递给setFavorites，但是我将您的getfromlocalstorage函数重复使用。不确定您如何确定该状态价值。

通过这样做，您将确保您要在setFavorites中设置的值与现有fairter值并不相同，因此您将触发RE -使成为。