如何检查特定单词是否存在于嵌套对象数组中及React-Mention库动态添加自定义标签的问题排查与逻辑位置建议

你的现有代码问题分析 #

先拆解下你写的代码里的问题：

1. 标签提取逻辑有漏洞：用空格分割文本会导致标签带标点（比如#newHashtag"会被提取成newHashtag"），而且会混入undefined（比如单独的#或者# 这种情况）。
2. 匹配逻辑错误：i.display.includes(array.map((j) => j))这里，array.map返回的还是数组，而includes()只能检查字符串是否包含单个值，所以这个判断永远不会得到正确结果。

修正后的实现逻辑 #

先写一个靠谱的标签提取函数，再逐个检查标签是否存在：

// 提取文本中所有有效的hashtag（去掉#，排除标点）
const getHashtagsFromText = (text) => {
  const hashtagRegex = /#(\w+)/g;
  const matches = text.match(hashtagRegex);
  return matches ? matches.map(tag => tag.slice(1)) : [];
};

// 提交按钮的点击处理函数
const handleCommentSubmit = () => {
  const allHashtags = getHashtagsFromText(newComment);
  
  allHashtags.forEach(tag => {
    // 检查当前标签是否在已有数据源中
    const tagExists = hashtagData.some(item => item.display === tag);
    if (!tagExists) {
      // 标签不存在，调用API添加
      console.log(`准备添加新标签：${tag}`);
      // 这里替换成你的API调用逻辑
      // fetch('/api/add-hashtag', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({ display: tag })
      // }).then(res => res.json()).then(newTag => {
      //   // 添加成功后更新本地数据源
      //   setHashtagData(prev => [...prev, newTag]);
      // });
    }
  });
};

逻辑应该放在onClick还是onChange？ #

优先放在onClick（提交按钮的点击事件）：

• 因为添加标签是一个确认后的动作，用户输入完内容、点击提交时再处理，能避免输入过程中频繁触发API（比如用户还在输入#newHa时就发起请求，这显然不合理）。
• 如果想做实时提示（比如告诉用户“这个标签是新的”），可以在onChange里做检查，但实际的API调用还是要等用户确认后再执行，不然会产生大量无效请求。

内容的提问来源于stack exchange，提问作者Suraj Pawar