深入理解JavaScript中表单输入与数组ID存在性检查的类型陷阱

const bioData = [{ id: 1, name: "Alice" }];

// 假设从事件对象 e.target.value 获取输入值
const inputValue = e.target.value; // 此时 inputValue 是字符串，例如 "1"
const numericId = parseInt(inputValue, 10); // 将 "1" 转换为数字 1

const isFound = myArray.some(el => el.id === numericId);

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

export default function App() {
  // 初始数据，ID为数字类型
  const initialBioData = [{ id: 1, name: "Harry", score: 12 }];
  const [myArray, setMyArray] = useState(initialBioData);
  const [currentIdInput, setCurrentIdInput] = useState(""); // 存储原始字符串输入

  // 使用ref获取其他输入字段的值
  const nameInputRef = useRef();
  const scoreInputRef = useRef();

  // 处理ID输入变化，并进行类型转换
  const handleIdChange = (e) => {
    // e.target.value 仍然是字符串
    setCurrentIdInput(e.target.value);
  };

  // 更新数组的函数
  const updateArray = () => {
    // 检查currentIdInput是否为空，避免尝试转换空字符串
    if (!currentIdInput.trim()) {
      console.warn("ID输入不能为空");
      return;
    }

    // 将字符串ID转换为数字，基数为10
    const newId = parseInt(currentIdInput, 10);

    // 检查转换结果是否为有效数字
    if (isNaN(newId)) {
      console.error("请输入有效的数字ID");
      return;
    }

    // 构造新的数据对象
    const newData = {
      id: newId,
      name: nameInputRef.current ? nameInputRef.current.value : "",
      score: scoreInputRef.current ? parseInt(scoreInputRef.current.value, 10) : 0, // 分数也需要转换
    };

    // 使用 some() 方法检查ID是否已存在
    const isFound = myArray.some((el) => el.id === newData.id);

    if (isFound) {
      console.log(`✅ 数组中已包含ID为 ${newData.id} 的对象`);
      // 如果ID已存在，可以根据业务逻辑选择是更新还是阻止添加
      return; // 阻止添加重复ID
    }

    // 如果ID不存在，则添加到数组
    setMyArray((prevArray) => [...prevArray, newData]);
    console.log("数据已更新:", [...myArray, newData]);

    // 清空表单输入
    setCurrentIdInput("");
    if (nameInputRef.current) nameInputRef.current.value = "";
    if (scoreInputRef.current) scoreInputRef.current.value = "";
  };

  // 渲染组件
  return (
    <form onSubmit={(e) => {
      e.preventDefault(); // 阻止表单默认提交行为（页面刷新）
      updateArray();
    }}>
      <h2>添加新数据</h2>
      <input
        type="number"
        placeholder="输入ID"
        value={currentIdInput} // 控制输入框
        onChange={handleIdChange}
        required
      />
      <input
        ref={nameInputRef}
        type="text"
        placeholder="输入姓名"
        required
      />
      <input
        ref={scoreInputRef}
        type="number"
        placeholder="输入分数"
        required
      />
      <button type="submit">提交</button>

      <h3>当前数据列表:</h3>
      <ul>
        {myArray.map((item) => (
          <li key={item.id}>
            ID: {item.id}, 姓名: {item.name}, 分数: {item.score}
          </li>
        ))}
      </ul>
    </form>
  );
}