我正在制作一个食谱应用程序。我希望用户能够将食谱添加到收藏夹列表中。涉及 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 数据）作为新项目添加到状态数组的新副本中，来永久更新收藏夹状态，然后将其存储在本地存储中。

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

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