ReactJS中输入数字存入数组时被覆盖的问题求助

核心问题分析 #

你当前代码里的数组更新逻辑存在错误：

const numbersArray = [assigned];
numbersArray.push(number);
takenNumber(numbersArray);

这段代码把现有数组assigned作为新数组的第一个元素，导致每次更新都是嵌套数组（比如第一次生成[[],"1"]，第二次变成[[[],"1"],"2"]），完全没有正确累积之前的数字。

修复方案 #

1. 正确累积数组元素 #

把数组更新逻辑改成基于旧数组展开的方式，有两种可靠写法：

写法一：直接展开旧数组

function handleAdd() {
  dispatchListData({ type: 'ADD_ITEM', name, number, id: uuidv4() });
  setName('');
  setNumber('');
  // 创建包含旧元素+新元素的新数组
  const numbersArray = [...assigned, number];
  takenNumber(numbersArray);
  console.log(numbersArray);
}

写法二：函数式更新（更推荐）

当状态更新依赖之前的状态时，函数式更新能确保拿到最新的状态值，避免状态同步问题：

function handleAdd() {
  dispatchListData({ type: 'ADD_ITEM', name, number, id: uuidv4() });
  setName('');
  setNumber('');
  // 基于最新状态更新数组
  takenNumber(prevAssigned => [...prevAssigned, number]);
}

2. 加入重复数字拦截逻辑 #

结合你的需求，在更新数组前先判断数字是否已存在（注意统一数据类型，输入框返回的number是字符串类型）：

function handleAdd() {
  const inputNum = Number(number);
  // 检查数字是否已被占用
  if (assigned.includes(inputNum)) {
    alert("该数字已被使用，请输入其他数字");
    return;
  }
  dispatchListData({ type: 'ADD_ITEM', name, number, id: uuidv4() });
  setName('');
  setNumber('');
  // 更新数组
  takenNumber(prev => [...prev, inputNum]);
}

3. 修正组件props的使用错误 #

你的AddItem组件接收了onChange、onNumber、onAdd props，但内部直接使用了父组件的方法，导致传入的props失效，改成调用传入的props方法：

const AddItem = ({ number, name, onChange, onNumber, onAdd }) => (
  <form>
    <input type="text" value={name} onChange={onChange} />
    <input type="number" value={number} onChange={onNumber} min="1" max="20" />
    <button type="button" onClick={onAdd}>
      Add
    </button>
  </form>
);

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