React中处理表单输入ID与数组现有ID的精确匹配：避免类型陷阱

const bioData = [
  {id:1}
];

const [myArray, setmyArray] = useState(bioData);
const [sid, setId] = useState(""); // sid用于存储用户输入的ID

const handleID = (e) => {
  setId(e.target.value); // 直接将输入值赋给sid
};

const updateArray = () => {
  // 检查myArray中是否存在id与sid相同的元素
  const isFound = myArray.some(el => el.id === sid);
  console.log(isFound); // 预期为true，实际输出false
};

// JSX部分
<input type="number" placeholder='Please enter your ID' onChange={handleID} />
<button onClick={updateArray}>Add</button>

// Filename: App.js
import React, { useState, useRef } from "react";

export default function App() {
  // 初始数据，ID为数字类型
  const initialBioData = [
    { id: 1, name: "Harry", score: 12 },
    { id: 2, name: "Alice", score: 15 },
    { id: 3, name: "Bob", score: 10 }
  ];

  const [myArray, setMyArray] = useState(initialBioData);
  const [sid, setId] = useState(null); // 存储转换后的数字ID
  const nameInputRef = useRef(null); // 用于获取姓名输入框的值
  const scoreInputRef = useRef(null); // 用于获取分数输入框的值

  /**
   * 处理ID输入框的变更事件
   * 将输入值转换为整数并更新sid状态
   */
  const handleIdChange = (e) => {
    // 使用parseInt将字符串转换为数字，基数10表示十进制
    const parsedId = parseInt(e.target.value, 10);
    // 检查是否为有效数字，避免将NaN存入状态
    setId(isNaN(parsedId) ? null : parsedId);
  };

  /**
   * 处理表单提交或按钮点击事件，用于更新数组
   */
  const updateArray = () => {
    // 验证ID是否已输入且有效
    if (sid === null || isNaN(sid)) {
      alert("请输入有效的ID！");
      return;
    }

    // 检查ID是否已存在于数组中
    const isFound = myArray.some((el) => el.id === sid);

    if (isFound) {
      console.log(`✅ 数组中已存在ID为 ${sid} 的对象。`);
      alert(`ID ${sid} 已存在，请尝试其他ID。`);
      return; // 如果ID已存在，则停止后续操作
    }

    // 如果ID不存在，则创建新数据对象并添加到数组
    const new_data = {
      id: sid,
      name: nameInputRef.current.value,
      score: parseInt(scoreInputRef.current.value, 10) // 分数也需要转换为数字
    };

    setMyArray([...myArray, new_data]); // 使用展开运算符添加新数据
    console.log("数组已更新：", [...myArray, new_data]);
    alert(`成功添加ID为 ${sid} 的新数据。`);

    // 清空表单字段（可选）
    // nameInputRef.current.value = "";
    // scoreInputRef.current.value = "";
    // setId(null); // 重置ID状态
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>管理用户数据</h1>
      <form onSubmit={(e) => { e.preventDefault(); updateArray(); }}>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="input-id" style={{ marginRight: '10px' }}>ID:</label>
          <input
            id="input-id"
            type="number"
            placeholder="输入ID"
            onChange={handleIdChange}
            required
            style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label htmlFor="input-name" style={{ marginRight: '10px' }}>姓名:</label>
          <input
            id="input-name"
            ref={nameInputRef}
            type="text"
            placeholder="输入姓名"
            required
            style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label htmlFor="input-score" style={{ marginRight: '10px' }}>分数:</label>
          <input
            id="input-score"
            ref={scoreInputRef}
            type="number"
            placeholder="输入分数"
            required
            style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <button
          type="submit"
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          提交数据
        </button>
      </form>

      <h2 style={{ marginTop: '30px' }}>当前数据列表:</h2>
      <ul style={{ listStyleType: 'none', padding: 0 }}>
        {myArray.map((item) => (
          <li key={item.id} style={{
            background: '#f8f9fa',
            border: '1px solid #e9ecef',
            padding: '10px',
            marginBottom: '5px',
            borderRadius: '4px'
          }}>
            ID: {item.id}, 姓名: {item.name}, 分数: {item.score}
          </li>
        ))}
      </ul>
    </div>
  );
}