React中的Helpers.js

Question

我导出了将在helpers.js文件上重用的函数，但在导入时会重用这些函数。我的useStates不再定义。

使用helpers.js的ProductPage这是我的useState，当我导入所有这些函数时，它是未定义的

import React, { useState } from "react"

import { Link } from "gatsby"

import FavoriteIcon from "@material-ui/icons/Favorite"
import { makeStyles } from "@material-ui/core/styles"

import { addFavorite, removeFavorite, isProductInFavorites, getAllFavoriteProducts } from "../../helpers"

const ProductList = ({ products }) => {
  const classes = useStyles()

  const [favorites, setFavorites] = useState(getAllFavoriteProducts())

  return (
    <>
      <div className={classes.root}>
        {products?.map((product) => {
          return (
            <div className="ProductCard" key={product._id}>
              <div>
                <Link to="/shop" state={{ shop: product.shop }}>
                  <img
                    className="ProductImage"
                    src={product.imagePrimary}
                    alt={product.name}
                  />
                </Link>
                <div className="FavButton">
                  {isProductInFavorites(product) ? (
                    <FavoriteIcon
                      fontSize="small"
                      style={{ fill: "red" }}
                      onClick={() => removeFavorite(product)}
                    />
                  ) : (
                    <FavoriteIcon
                      fontSize="small"
                      style={{ fill: "gray" }}
                      onClick={() => addFavorite(product)}
                    />
                  )}
                </div>
              </div>
              <div className="ProductCardDetails">
                <div className="NameAndPrice">
                  <div className="ProductName">{product.name}</div>
                  <div className="ProductPrice">P{product.price}</div>
                </div>
                <div className="Description"> by {product.shop.name}</div>
              </div>
            </div>
          )
        })}
      </div>
    </>
  )
}

export default ProductList

helpers.js

在我的函数中，我使用了favorites来传递数据，但是当我在ProductPage上时，它是未定义的。

function getFromLocalStorage(key) {
    return JSON.parse(localStorage.getItem(key))
  }
  
  function setToLocalStorage(key, data) {
    localStorage.setItem(key, JSON.stringify(data))
  }
  
  export const favoriteProductsStorageKey = "favorites_products"
  
  export function addFavorite(product) {
    const isProductAlreadyFavorite = isProductInFavorites(product)

    if (isProductAlreadyFavorite) return

    const newFavoriteProducts = [...favorites, product]

    setFavorites(newFavoriteProducts)
    setToLocalStorage(favoriteProductsStorageKey, newFavoriteProducts)
  }

  export function removeFavorite(product) {
    const newFavoriteProducts = favorites.filter(
      (iteratedProduct) => iteratedProduct._id !== product._id
    )

    setFavorites(newFavoriteProducts)
    setToLocalStorage(favoriteProductsStorageKey, newFavoriteProducts)
  }

  export function isProductInFavorites(product) {
    return favorites.some(
      (iteratedProduct) => iteratedProduct._id === product._id
    )
  }

  export function getAllFavoriteProducts() {
    return getFromLocalStorage(favoriteProductsStorageKey) || []
  }

问题是我如何再次使用我的函数？我似乎想不通了。我收到一个错误

​

Answer 1

本地状态组件中使用的setFavourite和favourite变量超出了helpers文件的作用域，您将无法从组件作用域之外调用这些函数。为此，您需要使用某种状态管理库，如redux。还需要提到这一点，似乎你正在尝试将你的组件状态保存到localStorage中，有一些钩子可以用来实现这一点。您可以查看此挂钩https://usehooks.com/useLocalStorage/的源代码