我如何在第一次按回车键时获得要提交的表单？答案

【问题标题】：How do I get a form to submit the first time I hit enter in react?我如何在第一次按回车键时获得要提交的表单？
【发布时间】：2022-11-23 11:17:18
【问题描述】：

我觉得有一个简单的解决方法，但我没有找到它。在我第一次打开页面后，在输入中键入一个数字并点击提交我在控制台中得到一个空数组并且没有显示任何数字。当我再次按下回车键时，它起作用了。我如何获得第一次显示的号码？

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;

我尝试了很多不同的东西，但似乎没有任何效果

【问题讨论】：

我相信 concat 方法需要一个数组。更简单的方法可能是setTotalMiles([...totalMiles, Number(miles)])
谢谢尼克的提示。出于某种原因，我仍然得到相同的结果。在第一次提交时，我得到 Uncaught TypeError: Reduce of empty array with no initial value。我认为 React 试图在设置状态之前对数组求和。任何想法为什么会这样？
我实际上不建议将 total 存储为它自己的状态，它纯粹是派生的。我会更新我的答案。
好的，添加了我的答案和一个工作示例的链接
惊人的！这样可行。谢谢您的帮助！

标签： reactjs forms input

【解决方案1】：

Array.concat 方法连接两个数组，但你传递的是一个数字。相反，请考虑以这种方式设置总英里数：

setTotalMiles([...totalMiles, Number(miles)]);

另外，我建议不要将 total 存储为它自己的状态，因为它完全来自现有状态。您可以在函数体中计算它：

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

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    setTotalMiles([...totalMiles, Number(miles)]);
  };

  const total = totalMiles.reduce((total, n) => total + n, 0);

  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;

这是working codesandbox link。

【讨论】：

【解决方案2】：

我认为了解为什么会发生这种情况很重要。

setState 钩子是异步的。所以到时候

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

  setTotalMiles(prevState => ([…prevState, Number(miles)])
  
  ))

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

请参阅文档。 https://reactjs.org/docs/hooks-reference.html#usestate

【讨论】：