Javascript 在Reactjs中使用表情选择器包

我正在尝试为输入框实现一个表情选择器。这是我第一次使用它，我在使用时遇到了问题。我不能给用户输入多个表情符号的能力。之前选择的表情符号始终替换上一个。有人能帮我吗？现在我决定在一个沙箱中测试它，但如果我能把它拉出来，我会在一个项目中使用它。代码如下：

import React, { useState } from "react";
import Picker, { SKIN_TONE_MEDIUM_DARK } from "emoji-picker-react";

const App = () => {

  const [emoji, setEmoji] = useState([])

  const onEmojiClick = (event, emojiObject) => {
    setEmoji(emojiObject);
  };


  return (
    <div>
      <Picker onEmojiClick={onEmojiClick} skinTone={SKIN_TONE_MEDIUM_DARK} />

      <input
        type="text"
        id="input"
        onChange={e => setEmoji([...emoji, e.target.value])}
        value={emoji.emoji}
      />

    </div>
  );
};

export default App;

import React，{useState}来自“React”；
从“表情选择器反应”中导入选择器，{皮肤颜色\中等颜色\深色}；
常量应用=（）=>{
常量[emoji，setEmoji]=useState（[]）
const onEmojiClick=（事件，emojiObject）=>{
setEmoji（emojiObject）；
};
返回(
setEmoji（[…emoji，e.target.value]））
值={emoji.emoji}
/>
);
};
导出默认应用程序；

这是因为您正在覆盖表情符号的状态。也许您可以将它们存储在一个数组中并执行以下操作：

setUseMoji（[…UseMoji，newEmoji]）

然后在需要显示它们时将其映射到它们上

---

useMoji.map（（emoji）=>{emoji}）

从一开始就将其设置为数组

from:

const[emoji，setEmoji]=useState（{}）

收件人：

const[emoji，setEmoji]=useState（[]）

然后这样设置：

setEmoji（[…emoji，e.target.value]）

然后像这样迭代：

emoji.map（（emj）=>{emj}）

或者如果它是一个对象：

---

emoji.map（（emj）=>{emj.propertyValue}）

我做不到，我将编辑我的问题并向您展示我的更改，但我得到了相同的错误：“传播不可编辑实例的尝试无效”@gabrietisovinhasdebrito检查我的新答案，但我将起诉setuseMoji（[…emoji，e.target.value]））在我的handleChange或在我的handleSubmit中？抱歉，不要使用

setuseMoji

使用此：

setEmoji（[…emoji，e.target.value]）

在

handleChange中，我将再次编辑问题。它不起作用了。看看你说“它不工作”的时候是哪一部分？你没有做这个
emoji.map（（emj）=>{emj.emoji}）
所以它不会显示多个，你也没有改变这个：
setEmoji（emojiObject）
to
setEmoji（[…emoji，emojiObject]）