React中如何从给定对象数组校验用户名密码并返回匹配索引

直接使用数组的findIndex方法即可实现需求，该方法会返回第一个符合匹配条件的数组元素索引，无匹配项时返回-1，完全适配你的场景。

第一步：修正现有代码笔误 #

你贴的第二个输入框标签有书写错误：<inputonChange 中标签名和事件属性之间漏了空格，会导致onChange事件无法正常绑定，需要修正为<input onChange。

第二步：实现valid校验函数 #

完整的登录组件代码如下：

import { useState } from 'react';
// 若使用react-router做路由跳转，可引入useNavigate
// import { useNavigate } from 'react-router-dom';

export default function Login({ customer }) {
  // customer是从路由/父组件App.js传入的客户状态数组
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  // const navigate = useNavigate(); // 路由跳转实例

  const valid = () => {
    // 查找同时匹配用户名、密码的客户索引
    const targetIndex = customer.findIndex(item => {
      // 加trim()过滤用户误输入的首尾空格，不需要可删除
      return item.name === name.trim() && item.password === password.trim();
    });

    // 无匹配项分支
    if (targetIndex === -1) {
      alert('用户名或密码错误，请重新输入');
      // 清空密码输入框
      setPassword('');
      return;
    }

    // 匹配成功分支：将索引传递给客户页面
    // 方式1：react-router v6 跳转携带索引参数
    // navigate('/customer', { state: { userIndex: targetIndex } });
    
    // 方式2：通过父组件传入的回调函数传递索引
    // onLoginSuccess(targetIndex);

    alert(`登录成功，匹配客户索引：${targetIndex}`);
  };

  return (
    <div className="login-form">
      <input 
        onChange={(e) => setName(e.target.value)} 
        placeholder='user name'
        value={name}
      />
      <input 
        onChange={(e) => setPassword(e.target.value)} 
        placeholder='password'
        type="password"
        value={password}
      />
      <button onClick={valid}>Enter</button>
    </div>
  );
}

注意事项 #

• 不要用find+indexOf的组合实现，该方式会遍历两次数组，性能不如直接用findIndex
• 匹配失败返回-1的分支必须做拦截处理，不要直接将-1传入客户页面，会导致数组读取越界
• 客户页面接收索引参数时建议加兜底校验，避免用户直接访问页面路径时无有效参数导致报错
• 生产环境不要明文存储/传输密码，当前示例仅做前端逻辑演示使用

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