React中如何实现表单按回车首次提交即生效？

问题描述 #

首次打开页面后，在输入框中输入数字并提交，控制台显示空数组，无数字展示；再次按回车提交则正常，需要实现首次提交时就正常展示数字和计算总里程。

原代码 #

import React from 'react';
import {useState} from 'react';

const ShowDays = () =>{
const [totalMiles, setTotalMiles] = useState([])
const [miles, setMiles] = useState([])
const [total, setTotal] = useState([])

const handleChange = (e) =>{
  setMiles(e.target.value)

}

const handleSubmit = (e) =>{
  e.preventDefault();

  setTotalMiles([...totalMiles].concat(Number(miles)
  
  ))

  if (totalMiles !== []){
   let result = totalMiles.reduce((total, n) =>{
      return total += n
    })
    setTotal(result)

  }
  
}

return (
  <div>
  <form onSubmit={handleSubmit}>
    <input type='text' placeholder='enter miles' onChange={handleChange} value={miles}/>
    <button>Submit</button>
  </form>
  <p>{`Total Milage: ${total} `}</p>
  </div>
)
    
}

export default ShowDays;

问题根源 #

1. React状态更新异步特性：调用setTotalMiles后，totalMiles不会立即更新，首次提交时计算总里程用的还是初始空数组，导致结果异常。
2. 状态初始化错误：miles作为输入框值应初始化为空字符串而非数组；total作为累加结果应初始化为0而非数组，类型不匹配导致展示异常。
3. 数组判断逻辑错误：totalMiles !== []永远为false，因为数组是引用类型，两个独立数组对象无法直接相等，正确判断应为totalMiles.length > 0。
4. reduce无初始值：空数组调用reduce会抛出错误，必须提供初始值才能处理空数组场景。

修正后的代码 #

import React from 'react';
import { useState } from 'react';

const ShowDays = () => {
  const [totalMiles, setTotalMiles] = useState([]);
  const [miles, setMiles] = useState(''); // 输入框值初始化为空字符串
  const [total, setTotal] = useState(0); // 累加结果初始化为0

  const handleChange = (e) => {
    setMiles(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 转换为数字并过滤非数字输入
    const newMile = Number(miles);
    if (isNaN(newMile)) return;

    // 基于当前状态计算新的数组和总里程
    const newTotalMiles = [...totalMiles, newMile];
    const newTotal = newTotalMiles.reduce((sum, num) => sum + num, 0);

    // 同步更新状态
    setTotalMiles(newTotalMiles);
    setTotal(newTotal);
    
    // 清空输入框
    setMiles('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type='text'
          placeholder='enter miles'
          onChange={handleChange}
          value={miles}
        />
        <button>Submit</button>
      </form>
      <p>{`Total Milage: ${total}`}</p>
      {/* 可选：展示已输入的所有里程 */}
      <div>
        <h4>已录入里程：</h4>
        {totalMiles.map((mile, idx) => (
          <span key={idx}>{mile} </span>
        ))}
      </div>
    </div>
  );
};

export default ShowDays;

关键改动说明 #

• 修正状态初始化，匹配数据类型：输入框值用空字符串，累加结果用数字0。
• 预计算新状态：先基于当前totalMiles计算出新数组和总里程，再同步更新两个状态，避开异步更新的延迟问题，首次提交即可拿到正确结果。
• 给reduce添加初始值0：确保空数组场景下不会报错，同时正确计算首次累加结果。
• 添加非数字输入过滤：避免无效输入导致的逻辑错误。
• 提交后清空输入框，优化用户体验。

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