React useState数组Hook使用问题：如何为每个动态输入框创建独立对象并单独获取其值

问题分析 #

你遇到的问题核心有两个：

1. 每次触发输入框的onChange时，你都在往inText数组里追加新元素，而不是更新对应输入框的已有元素，导致输入一次就新增一个对象；
2. 直接依赖inText当前状态更新时，存在React Hooks的闭包陷阱，可能拿到旧的状态值，导致更新逻辑出错。

下面是具体的修正方案，一步步来改：

步骤1：初始化与天数匹配的状态数组 #

首先要保证inText数组的长度和当月天数numberOfDays一致，每个位置对应一个输入框的状态。可以用useEffect监听numberOfDays的变化，动态初始化数组：

import { useState, useEffect } from 'react';

// ...其他代码
const [inText, setInText] = useState([]);

useEffect(() => {
  // 生成和天数长度一致的数组，每个元素包含日期id和空值
  const initialState = Array.from({ length: numberOfDays }, (_, index) => ({
    id: index + 1, // 对应日期1~numberOfDays
    value: ''
  }));
  setInText(initialState);
}, [numberOfDays]);

步骤2：修改输入事件处理函数，精准更新对应项 #

给每个输入框绑定它的索引，这样触发onChange时就能知道要更新数组里的哪一项。这里一定要用函数式更新（setInText(prevState => ...)），这样能确保拿到最新的状态，避免闭包问题：

const handleInputChange = (index, e) => {
  const inputValue = e.target.value;
  setInText(prevState => {
    // 浅拷贝原数组，不要直接修改状态
    const updatedState = [...prevState];
    // 更新对应索引的元素的value，保留原有id
    updatedState[index] = { ...updatedState[index], value: inputValue };
    return updatedState;
  });
};

步骤3：修改渲染逻辑，绑定对应值和索引 #

渲染输入框时，要给每个输入框绑定对应的值（变成受控组件），并把当前索引传递给事件处理函数：

const renderInputCells = () => {
  const cells = [];
  for (let i = 0; i < numberOfDays; i++) {
    cells.push(
      <td key={i + 1}>
        <input
          type="text"
          value={inText[i]?.value || ''} // 绑定对应位置的值
          onChange={(e) => handleInputChange(i, e)} // 传递索引
        />
      </td>
    );
  }
  return cells;
};

步骤4：获取单个输入框的值 #

现在inText数组的下标和输入框顺序一一对应（下标0对应第一个输入框，下标1对应第二个），要获取第N个输入框的值，直接取：

// 比如获取第二个输入框的值
const secondInputValue = inText[1]?.value;

这样修改后，每个输入框会独立更新自己对应的数组元素，不会再出现新增对象的问题，而且能轻松获取任意输入框的内容。

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