如何在reactJs中使用map在数组中循环时动态添加新属性

Question

我有一个表情符号组件，在其中我循环遍历一个表情符号数组(SVG)，其存储方式如下:

Constant Emojis Array:

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内的地图在下面的代码?

Emoji组件:

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>
)
}

Answer 1

您可以这样归档您的目标。

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;
}

Answer 2

您可以通过常见的proplabel来查找计数值:

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>
)
}

我也不明白使用两个嵌套映射的意义，顺便说一句，也许你可以在这一点上给出一些启示:D