React表单输入与数组ID校验：解决类型不匹配问题

import React, { useState } from 'react';

function App() {
  const bioData = [
    {id: 1}
  ];

  const [myArray, setmyArray] = useState(bioData);
  const [sid, setId] = useState(""); // sid 存储来自输入框的值

  const handleID = (e) => {
    setId(e.target.value); // 从输入框获取值
  };

  const updateArray = () => {
    // 期望：如果 sid 为 1，则 isFound 为 true
    const isFound = myArray.some(el => el.id === sid);
    console.log(isFound); // 实际输出：false

    if (isFound) {
      console.log('✅ array contains object with id = 1');
    } else {
      console.log('❌ ID not found');
    }
  };

  return (
    <div>
      <input 
        type="number" 
        placeholder='Please enter your ID' 
        onChange={handleID} 
      />
      <button onClick={updateArray}>Check ID</button>
    </div>
  );
}

export default App;

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

export default function App() {
  const bioData = [{ id: 1, name: "harry", score: 12 }];
  const [myArray, setMyArray] = useState(bioData);
  const [sid, setId] = useState(); // 用于存储转换后的数字ID
  const nameInput = useRef(); // 用于获取姓名输入框的值
  const scoreInput = useRef(); // 用于获取分数输入框的值

  const handleId = (e) => {
    // 关键步骤：将输入值从字符串转换为十进制整数
    setId(parseInt(e.target.value, 10)); 
  };

  const updateArray = () => {
    const new_data = {
      id: sid, // sid 已经是数字类型
      name: nameInput.current.value,
      score: scoreInput.current.value
    };

    // 现在 sid 和 el.id 都是数字类型，可以正确比较
    const isFound = myArray.some((el) => {
      return el.id === new_data.id;
    });

    if (isFound) {
      console.log("✅ 数组中已包含ID:", new_data.id);
      return; // 如果ID已存在，则不添加新数据
    }

    // 如果ID不存在，则添加新数据
    setMyArray([...myArray, new_data]);
    console.log("数据已更新:", myArray); // 注意：这里可能不会立即显示最新状态，因为setState是异步的
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); updateArray(); }}>
      <div>
        <label htmlFor="inputId">ID:</label>
        <input
          id="inputId"
          type="number"
          placeholder="Enter Id"
          onChange={handleId} // 调用转换函数
          required
        />
      </div>
      <div>
        <label htmlFor="nameInput">Name:</label>
        <input 
          id="nameInput"
          ref={nameInput} 
          type="text" 
          placeholder="Enter Name" 
          required 
        />
      </div>
      <div>
        <label htmlFor="scoreInput">Score:</label>
        <input
          id="scoreInput"
          ref={scoreInput}
          type="number"
          placeholder="Enter Score"
          required
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}