React中输入文本与指定值匹配时如何打印日志？代码纠错

需求：当输入框中的文本与指定值匹配时，在控制台打印对应内容。

原代码 #

import './App.css';
import { useState } from 'react';

function App() {
  const [text, setText] = useState()

  const People = {
    name: 'jack'
  }
  const peoples = People.map(() => ({
    nick: People.name
  })
  )

  const funct = () =>{
    if (text === peoples.nickname) {
      console.log('worked')
    } else {
      console.log('not worked')
    }
  }

  return (
    <div>
      <input onChange={(event) => {setText(event.target.value)}}/>
      <h1>{text}</h1>
      <br />
      <button onClick={funct}>Click</button>
    </div>
  );

}

export default App;

代码错误分析 #

• People是对象，不能调用数组的map方法，map仅适用于数组类型
• peoples是错误生成的数组，无法直接通过peoples.nickname访问元素属性，需通过索引或遍历获取对应值
• useState未设置初始值，初始状态为undefined，可能导致判断逻辑异常
• 条件判断中匹配的属性名错误，代码中定义的是nick而非nickname

修正后的代码 #

import './App.css';
import { useState } from 'react';

function App() {
  // 给useState设置初始空字符串，避免undefined引发的判断问题
  const [text, setText] = useState('')

  // 直接定义为数组，符合后续匹配需求
  const peoples = [
    { nick: 'jack' }
  ]

  const checkMatch = () =>{
    // 用some方法快速判断是否存在匹配的nick值
    const isMatch = peoples.some(item => item.nick === text.trim())
    if (isMatch) {
      console.log('worked')
    } else {
      console.log('not worked')
    }
  }

  return (
    <div>
      <input onChange={(event) => {setText(event.target.value)}}/>
      <h1>{text}</h1>
      <br />
      <button onClick={checkMatch}>Click</button>
    </div>
  );
}

export default App;

说明 #

1. 将人物数据改为数组类型，适配遍历匹配逻辑
2. 给useState设置初始空字符串，确保初始状态为字符串类型
3. 重命名函数为语义化的checkMatch，使用some方法高效判断匹配情况
4. 匹配时对输入文本做trim()处理，避免前后空格导致的匹配失败

内容的提问来源于stack exchange，提问作者Yusuf Irwin