如何在reactJs中使用map循环数组时动态添加新属性
如何在reactJs中使用map循环数组时动态添加新属性
提问于 2022-07-02 06:51:12
我有一个表情符号组件，其中循环遍历存储如下的一个表情符号数组(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 }我还从反应数组中得到了表情符号的计数(它来自于火基)。reactions数组如下所示：
reactions: [
{
"emoji": "rocket",
"label": "rocket",
"count": 23,
"users": [
"3322424",
"3243242"
]
},
{...},
{...}
]我想知道如何在下面的代码中从地图中的火基中添加一个表情符号计数？
表情符号组件：
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>
)
}回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-02 08:26:57
你可以通过这个来存档你的目标。
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;
}Stack Overflow用户
发布于 2022-07-02 06:58:32
您可以通过执行以下操作的常用道具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>
)
}另外，我也不明白使用两个嵌套映射的意义--也许你可以对此有所了解:D
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72837056
复制相关文章
相似问题
腾讯云开发者
