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() 函数进行比较。

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');
    }
})

带有 ReactJS 的脏话过滤器

1 个答案: