React中如何将数组值存入状态并提交获取，解决文本框输入异常

问题根源 #

1. 循环条件错误：Generator函数中错误使用count.count作为循环上限，传入的count是数字/字符串类型，不存在count属性，导致循环无法正确生成对应数量的文本框。
2. count状态类型异常：count输入框的value是字符串，直接存入状态后，后续循环可能出现类型不匹配的问题。
3. option数组未与count同步：当count变化时，option数组长度未随之调整，新增的文本框value为undefined，引发受控组件与非受控组件的切换，导致输入时内容丢失。

修正后的代码 #

import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [option, setOption] = useState([]);

  // 同步option数组长度与count一致，缺失项补空字符串
  useEffect(() => {
    const newOptions = [...option];
    // 补充空字符串至count指定长度
    while (newOptions.length < count) {
      newOptions.push('');
    }
    // 截断数组至count指定长度
    if (newOptions.length > count) {
      newOptions.splice(count);
    }
    setOption(newOptions);
  }, [count]);

  const Generator = () => {
    const textArr = [];
    for (let i = 0; i < count; i++) {
      const name = `txt${i}`;
      textArr.push(
        <input
          type="text"
          key={name}
          id={name}
          onChange={(e) => onChangeOptions(e, i)}
          value={option[i] || ''}
        />
      );
    }
    return textArr;
  };

  const onChangeOptions = (e, i) => {
    const val = e.target.value;
    const newOptions = [...option];
    newOptions[i] = val;
    setOption(newOptions);
  };

  const onSubmitForm = (e) => {
    e.preventDefault(); // 阻止表单默认提交刷新页面
    console.log(option);
  };

  return (
    <div>
      <form onSubmit={onSubmitForm}>
        <input
          type="number"
          id="count"
          value={count}
          onChange={(e) => setCount(Number(e.target.value) || 0)}
        />
        <br />
        <Generator />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

关键修改点说明 #

• 修正循环逻辑：Generator函数直接使用count作为循环上限，不再错误访问count.count属性。
• 规范count类型：将count输入框改为number类型，onChange时转为数字存入状态，确保count始终为有效数字。
• 同步数组长度：通过useEffect监听count变化，自动调整option数组长度，避免文本框value为undefined引发的输入异常。
• 简化取值逻辑：直接用option[i] || ''替代冗余的getOptionValue函数，确保文本框始终为受控组件。
• 阻止默认提交：在表单提交函数中添加e.preventDefault()，避免页面刷新丢失状态。

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