React使用emoji-mart首次选表情出现undefined如何解决

问题原因 #

问题出在messageToSend状态的初始化逻辑：调用useState()时没有传入初始值，此时该状态的默认初始值为undefined。首次选中emoji执行字符串拼接操作时，就会得到undefined加表情字符的异常结果。

修复方案 #

可任选以下任意一种方式修复：

1. 初始化状态时设置默认空值
   直接修改useState的入参，给messageToSend设置初始空字符串即可：

// 修正前
const [messageToSend, setMessageToSend] = useState();
// 修正后
const [messageToSend, setMessageToSend] = useState('');

2. 状态更新时加空值兜底
   如果业务场景中messageToSend可能出现空值，可在更新状态时用函数式更新+空值兜底，避免并发修改状态时出现异常：
   修改Picker组件的onSelect回调逻辑：

onSelect={(emoji) => {
  setMessageToSend(prev => (prev ?? '') + emoji.native);
}}

该写法即使之前的状态值为undefined，也会先替换为空字符串再拼接emoji，不会生成异常内容。

完整修正代码参考 #

import { useState } from 'react';
import { Picker } from "emoji-mart";

const ChatMain = (props) => {
  const [messageToSend, setMessageToSend] = useState('');
  const [isEmojiPickerVisible, setEmojiPickerVisibility] = useState(false);
  return (
    <div className="row m-0 chat_footer_buttons">
      {isEmojiPickerVisible && (
        <Picker
          title=""
          showPreview={false}
          showSkinTones={false}
          color="#2189FF"
          onSelect={(emoji) => {
            setMessageToSend(prev => prev + emoji.native);
          }}
          style={{ position: "absolute", bottom: 85 }}
        />
      )}
      <div className="col text-center  d-flex justify-content-center chat_footer_button chat_footer_button_two">
        <button
          className={`p-0 btn btn-link outline-none shadow-none ${
            isEmojiPickerVisible ? "text-black" : "text-secondary"
          }`}
          onClick={() => setEmojiPickerVisibility(!isEmojiPickerVisible)}
        >
          <i className="fas fa-laugh" />
        </button>
      </div>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Pulse Nova