条件渲染仅适用于数组的第一个元素

Question

我有一个从“themealdb.com”渲染食物的项目。 使用全局上下文并从全局上下文导入数据。 themealdb 提供的每顿饭都用“地图”function 呈现。我有一个名为“收藏夹”的数组，如果已经将餐点添加到收藏夹，我想相应地呈现类似按钮。

我的目标是根据收藏夹数组中是否已有膳食来呈现类似按钮。 我的代码现在没有任何错误消息，但我在收藏夹数组中有一个用于迭代的 for 循环，但它仅适用于第一个元素。

我尝试对收藏夹数组中的每个元素使用 foor 循环进行迭代，如果 id 匹配，我希望它为 map function 中的每顿饭呈现不同的图标。

function decideLikeButton(favorites,idMeal){


    if(favorites.length<1){
      return(
        <FcLike />
      )     

    }
    else if(favorites.length>0){
      for (let i=0; i<favorites.length; i++){
        if(favorites[i].idMeal === idMeal){
          return(
            <FcDislike/>
          )
        }
        else{
          return(
            <FcLike/>
          )
        }
      }
    }
  }

这是我对组件的回报

 return <section className={"section-center"}>
{meals.map((singleMeal) => {
  const { idMeal, strMeal: title, strMealThumb: image } = singleMeal
  return <article key={idMeal} className={darkMode? "single-meal-dark": "single-meal"}>
    <img src={image} className='img' onClick={() => selectMeal(idMeal)} />
    <footer>
      <h5>{title}</h5>
      <button className="like-btn" onClick={() => { addToFavorites(idMeal) }}> 
        {
          decideLikeButton(favorites, idMeal)
          
        }
       </button>
    </footer>
  </article>
})}

Answer 1

问题与您的for循环有关。 您通过在第一次迭代中返回来打破循环。 您需要更换这部分：

for (let i=0; i<favorites.length; i++){
    if(favorites[i].idMeal === idMeal){
      return(
        <FcDislike/>
      )
    }
    else{
      return(
        <FcLike/>
      )
    }
}

使用此代码：

for (let i=0; i<favorites.length; i++){
    if(favorites[i].idMeal === idMeal){
      return(
        <FcDislike/>
      )
    }
}

return(
    <FcLike/>
)

Answer 2

重写 decideLikeButton function

function decideLikeButton(favorites, idMeal){
 if(favorites.findIndex(fav => fav.idMeal === idMeal) !== -1) {
    return <FcDislike/>

 } else {
    <FcLike/>
 }
}

Answer 3

这是因为你总是在第一次迭代时返回，试试这个：

function decideLikeButton(favorites, idMeal) {
  if (favorites.some((favorite) => favorite.idMeal === idMeal)) {
    return <FcDislike />;
  }
  return <FcLike />;
}

Answer 4

个人 ID go 用于：

const getReactionIcon = (favorites, lookUpIdMeal) => {
  if (favorites.some(({ idMeal }) => idMeal === lookUpIdMeal)) return <FcDislike />


return <FcLike />;
}