React中useState取值存入MySQL返回0的问题求助

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

• 所有遍历生成的输入框共用同一个number状态变量，导致输入时状态被反复覆盖，最终提交到后端的可能是最后一次输入的值，或是初始的空字符串——后端如果把空字符串默认解析为0，就会出现存入MySQL后是0的情况。
• 输入框的value绑定的是原始数据billnums.billnum，而非你的state变量，这会导致输入时UI无法正确响应输入内容，state也无法同步记录每个输入框的真实值。

修复方案 #

我们需要把状态改成数组结构，让每个输入框对应数组中索引匹配的状态项，确保每个输入值都能被独立管理：

1. 初始化对应结构的状态
   用原始billnum数组的billnum字段初始化状态数组，保证初始值和输入框默认值一致：

   const [billNumbers, setBillNumbers] = useState(billnum.map(item => item.billnum));
   

2. 修改 onChange 函数，支持按索引更新状态
   给onChange传入输入框的索引，只更新对应位置的状态值：

   const onChange = (index, event) => {
     // 复制原数组，避免直接修改 state
     const updatedNumbers = [...billNumbers];
     updatedNumbers[index] = event.target.value;
     setBillNumbers(updatedNumbers);
   };
   

3. 更新输入框的绑定逻辑
   让输入框的value绑定到状态数组对应索引的项，同时给每个输入框设置唯一的id（避免label关联冲突）：

   {billnum.map((billnums, index) => (
     <div key={index} className="mb-3">
       <label htmlFor={`billnum-${index}`} className="form-label">
         BillNumber
       </label>
       <input
         className="form-control"
         type="text"
         id={`billnum-${index}`}
         value={billNumbers[index]}
         onChange={(e) => onChange(index, e)}
       />
     </div>
   ))}
   

4. 提交数据到后端
   当你需要把数据存入MySQL时，直接将billNumbers数组传给后端接口。后端可以遍历数组，将每个值对应插入或更新到数据库中。

额外注意事项 #

• 如果billnum数组中的每个项有唯一ID（比如id字段），建议把key换成这个唯一ID，而不是索引，避免数组顺序变化时出现渲染问题。
• 后端需要正确处理接收到的数组数据，避免把空字符串默认转换为0——可以在后端做非空校验，或者前端输入时做必填校验。

内容的提问来源于stack exchange，提问作者P.Tee