如何在reactJs中使用map回圈遍歷陣列時動態添加新屬性

我有一個 emoji 組件，我在其中回圈遍歷存盤如下的 emojis (SVG) 陣列：

恒定表情符號陣列：

import { ReactComponent as Coin } from "../assets/emojiIcons/coin.svg"
import { ReactComponent as Rocket } from "../assets/emojiIcons/rocket.svg"

const DEFAULT_EMOJI_OPTIONS = [
  {
    emoji: Rocket,
    label: "rocket",
  },
  {
    emoji: Coin,
    label: "coin",
  },
]

export { DEFAULT_EMOJI_OPTIONS }

而且我還從反應陣列中獲取表情符號計數（它來自firebase）。反應陣列如下所示：

reactions: [
  {
    "emoji": "rocket",
    "label": "rocket",
    "count": 23,
    "users": [
      "3322424",
      "3243242"
     ]
  },
  {...},
  {...}
]

我想知道如何在下面的代碼中的地圖內添加我從 firebase 獲得的表情符號計數？

表情符號組件：

import { DEFAULT_EMOJI_OPTIONS } from "../../utils/emojis"

const EmojiSection = ({reactions}) => {

  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
          {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
        <span
          key={emoji.label}
          onClick={() => console.log("clicked")}
        >
          <emoji.emoji width={32} height={32} />
          <span>
            {ADD EMOJI COUNT FROM FIREBASE}
          </span>
        </span>
      ))}
    </div>
  )
}

uj5u.com熱心網友回復：

您可以通過此存檔您的目標。

import { DEFAULT_EMOJI_OPTIONS } from "../../utils/emojis"

const EmojiSection = ({reactions}) => {

  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
          {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
        <span
          key={emoji.label}
          onClick={() => console.log("clicked")}
        >
          <emoji.emoji width={32} height={32} />
          <span>
            {reactions.find(reaction => reaction.label === emoji.label)?.count}
          </span>
        </span>
      ))}
    </div>
  )
}

如果你想增加每個用戶的點擊次數，可以使用 useState() 來實作，假設 'reactions' 值只是在這個組件中使用，不需要在其他組件中共享用戶點擊次數資訊。

否則，如果您有一些與 firebase 相關的更新方法，則必須包含該方法而不是 useState。

import { DEFAULT_EMOJI_OPTIONS } from "../../utils/emojis"

const EmojiSection = ({reactions}) => {
  const [userReactions, setUserReactions] = useState(reactions);

//Assuming that you can get user id from custom context-UserContext
  const {user} = useContext(UserContext);
  const {userId} = user;
  
  const handleClick = label => {
    let reaction = userReactions.find(r=>r.label==label);
    if(!reaction) return;
    if(userReactions.users.include(userId)){
       setUserReactions({
          ...userReactions,
          count: userReactions.count-1,
          user: removeValue(userReactions.user, userId)
       });
    }else{
       setUserReactions({
          ...userReactions,
          count: userReactions.count 1,
          user: addValue(userReactions.user, userId)
       });

       
    }

  };
  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
          {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
        <span
          key={emoji.label}
          onClick={() => handleClick(emoji.label)}
        >
          <emoji.emoji width={32} height={32} />
          <span>
            {reactions.find(reaction => reaction.label === emoji.label)?.count}
          </span>
        </span>
      ))}
    </div>
  )
}

const removeValue = (array, item) => {
    var index = array.indexOf(item);
    if (index !== -1) {
    array.splice(index, 1);
    }
    return array;
}
const addValue = (array, item) => {
   array.push(item);
   return array;
}

uj5u.com熱心網友回復：

您可以通過 common 道具找到計數值label：

import { DEFAULT_EMOJI_OPTIONS } from "../../utils/emojis"

const EmojiSection = ({reactions}) => {

  return (
    <div className="text-white border-2 border-gray-800 rounded p-3 my-8 max-w-xs mx-auto">
      {DEFAULT_EMOJI_OPTIONS.map((emoji) => (
        <span
          key={emoji.label}
          onClick={() => null}
        >
          <emoji.emoji width={32} height={32} />
          <span>
            {reactions.find(reaction => reaction.label === emoji.label).count}
          </span>
        </span>
      ))}
    </div>
  )
}

另外，我不明白使用 2 個嵌套地圖的意義，順便說一句，也許您可??以對此有所了解：D

標籤：反应 火力基地 谷歌云火库

上一篇：使用React從Firestore中提取資料

下一篇：呼叫Firebase.initializeApp()回傳“無法在通道上建立連接”-Flutter Firebase