React/JavaScript中处理表单输入ID与数组对象ID的类型匹配问题

const bioData = [{ id: 1 }, { id: 2 }];

parseInt(e.target.value, 10);

import React, { useState, useRef } from "react";

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

  // 使用useState管理数组状态
  const [myArray, setMyArray] = useState(initialBioData);
  // 使用useState管理当前输入的ID，初始化时无需特定值
  const [currentIdInput, setCurrentIdInput] = useState();

  // 使用useRef获取其他表单输入的值，避免不必要的re-render
  const nameInputRef = useRef();
  const scoreInputRef = useRef();

  // 处理ID输入框的onChange事件
  const handleIdChange = (e) => {
    // 使用parseInt将字符串类型的输入值转换为数字
    // 10 表示十进制
    const parsedId = parseInt(e.target.value, 10);
    // 检查转换结果是否为NaN，如果不是数字则不更新状态，或进行错误提示
    if (!isNaN(parsedId)) {
      setCurrentIdInput(parsedId);
    } else {
      // 如果输入不是有效数字，可以清空或设置一个默认值
      setCurrentIdInput(undefined);
    }
  };

  // 处理表单提交或添加按钮点击事件
  const handleAddItem = () => {
    // 检查ID是否有效
    if (currentIdInput === undefined) {
      console.error("请输入有效的ID。");
      return;
    }

    // 构建新的数据对象
    const newItem = {
      id: currentIdInput,
      name: nameInputRef.current.value,
      score: parseInt(scoreInputRef.current.value, 10) // 分数也需要转换
    };

    // 检查ID是否已存在于数组中
    const isIdFound = myArray.some((item) => item.id === newItem.id);

    if (isIdFound) {
      console.warn(`✅ 数组中已存在ID为 ${newItem.id} 的对象。`);
      // 可以添加用户反馈，例如弹窗提示
    } else {
      // 如果ID不存在，则添加到数组
      setMyArray([...myArray, newItem]);
      console.log("新项目已添加:", newItem);
      console.log("更新后的数组:", myArray);
      // 清空表单字段 (可选)
      // nameInputRef.current.value = "";
      // scoreInputRef.current.value = "";
      // setCurrentIdInput(undefined); // 清空ID输入状态
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>添加或检查用户数据</h2>
      <form onSubmit={(e) => {
        e.preventDefault(); // 阻止表单默认提交行为
        handleAddItem();
      }}>
        <div>
          <label htmlFor="input-id">ID:</label>
          <input
            id="input-id"
            type="number" // 界面上显示为数字输入，但值仍是字符串
            placeholder="请输入ID"
            onChange={handleIdChange}
            required
            style={{ margin: '5px' }}
          />
        </div>
        <div>
          <label htmlFor="input-name">姓名:</label>
          <input
            id="input-name"
            ref={nameInputRef}
            type="text"
            placeholder="请输入姓名"
            required
            style={{ margin: '5px' }}
          />
        </div>
        <div>
          <label htmlFor="input-score">分数:</label>
          <input
            id="input-score"
            ref={scoreInputRef}
            type="number"
            placeholder="请输入分数"
            required
            style={{ margin: '5px' }}
          />
        </div>
        <button type="submit" style={{ margin: '10px 0', padding: '8px 15px' }}>
          添加/检查
        </button>
      </form>

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

const parsedId = parseInt(e.target.value, 10);
if (!isNaN(parsedId)) {
  setCurrentIdInput(parsedId);
}