带有 ReactJS 的脏话过滤器

Question

考虑以下代码：

/* eslint-disable array-callback-return */
/* eslint-disable no-unused-expressions */
import React from 'react'
import './App.css';


let swear = [
'arse',
'ass',
'asshole',
'bastard',
'bitch',
'bollocks',
'bugger',
'bullshit',
'crap',
'damn',
'frigger',
]

const App = () => {
  let [count , setCount] = React.useState(0)
  let [approval , setApproval] = React.useState(false)
  let [text , setText] = React.useState('')


  
  const bogusCheck = (text) =>{
    swear.map(word => {
      text.includes(word) === true ? (console.log('Bad word found') ): (console.log('No bad word found')); 
    })
  }

  return (
    <div className="App">
      <h1>Profanity Checker</h1>
      <p>Enter a sentence below and click the button below:</p>
      <textarea cols="30" rows='10' value={text} onChange={e => setText(e.target.value) } />
      <br />
      <button onClick={() => bogusCheck(text)} >Profanity Check</button>
    </div>

  );
}
export default App;

这应该是一个亵渎过滤器。 原理是它从文本区域获取输入，然后使用.map() 和.includes() function 进行比较。

swear 是一个包含一些坏词的数组。

所以 map 循环遍历 swear 数组，提取每个单词并查看它是否包含在文本中。 如果返回 true 则控制台日志（发现坏词）。 如果不是，它会记录（没有找到坏词）

问题是，当我单击按钮时，它会记录 13 次不需要的结果，然后记录一次需要的结果，然后记录更多不需要的结果。 见下图。

什么是转机解决方案？

Answer 1

稍微修改一下代码：

const bogusCheck = (text) =>{
    const foundSwears = swear.filter(word => text.includes(word));
    if(foundSwears.length){
        console.log('Bad word found');
    } else {
        console.log('No bad word found');
    }
})