emoji-picker-react@4.3.0点击表情显示undefined及404报错问题

问题1：点击表情时emojiObject为undefined，控制台输出PointerEvent #

原因 #

emoji-picker-react v4.3.0的onEmojiClick回调参数顺序与你代码中写的相反，默认是**(emojiObject, event)**，而非(event, emojiObject)。当前代码把事件对象当成表情数据对象，导致无法获取表情内容。

修复代码 #

调整回调参数顺序，同时用函数式更新确保获取最新状态：

const handleEmojiClick = (emojiObject, event) => {
    console.log(emojiObject);
    setMsg(prevMsg => prevMsg + emojiObject.emoji);
}

问题2：表情图片资源404错误 #

原因 #

默认CDN数据源路径失效，或是emoji-datasource版本与picker版本不兼容，导致组合表情（如带肤色修饰的表情）的图片请求路径错误。

修复方法 #

给Picker组件指定兼容版本的CDN资源路径：

{showEmojiPicker && <Picker 
    onEmojiClick={handleEmojiClick} 
    cdnUrl="https://cdn.jsdelivr.net/npm/emoji-datasource-apple@14.0.0/img/apple/64/"
/>}

若需要其他风格表情，替换对应数据源路径即可（如google、twitter等）。

完整修复后代码示例 #

function ChatInput() {
    const [msg, setMsg] = useState('')
    const [showEmojiPicker, setShowEmojiPicker] = useState(false);

    const handleShowEmoji = () => {
        setShowEmojiPicker(!showEmojiPicker);
    }

    const handleEmojiClick = (emojiObject, event) => {
        console.log(emojiObject);
        setMsg(prevMsg => prevMsg + emojiObject.emoji);
    }

    return (
        <Container>
            <div className="button-container">
                <div className="emoji">
                    <BsEmojiSmileFill onClick={handleShowEmoji}/>
                    {showEmojiPicker && <Picker 
                        onEmojiClick={handleEmojiClick}
                        cdnUrl="https://cdn.jsdelivr.net/npm/emoji-datasource-apple@14.0.0/img/apple/64/"
                    />}
                </div>
            </div>
            <form className='input-container'>
                <input type='text' placeholder='type your message here' value={msg} onChange={(e) => setMsg(e.target.value)}/>
                <button className='submit'>
                    <IoMdSend/>
                </button>
            </form>
        </Container>
    )
}

内容的提问来源于stack exchange，提问作者Krishnadev. V