React中console.log打印useState输入值逐字符输出异常

使用React的useState Hook获取两个文本输入框内容时，控制台输出会将输入文本逐字符拆分打印，不符合预期。

create.js #

import React, {useState} from 'react'
import { Form, Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

export default function Create() {
    const[firstName, setFirstName] = useState('');
    const[lastName, setLasttName] = useState('');

    console.log(firstName);
    console.log(lastName);
  return (
      <div>
    <div>create</div>
    <div>

    <Form>
        <Form.Group className="mb-3" >
        <Form.Label>First Name</Form.Label>
        <Form.Control type="text" name='fName'  
        onChange={(e)=> setFirstName(e.target.value)} 
        placeholder="Enter first name" />
        </Form.Group>

        <Form.Group className="mb-3">
        <Form.Label>Last Name</Form.Label>
        <Form.Control type="text" name='lName'  
        onChange={(e)=> setLasttName(e.target.value)} 
        placeholder="Enter last name" />
        </Form.Group>

        <Button variant="primary" type="submit">
        Submit
        </Button>
</Form>
    </div>
    </div>
  )
}

App.js #

import './App.css';
    
import Create from './Components/create';


function App() {
  return (
    <div className="App">
        <h2>Hello</h2>
        <Create/>
    </div>
  );
}

export default App;

console.log直接写在了函数组件的顶层作用域中。React函数组件的核心特性是：每次state更新触发重渲染时，整个组件函数都会从头执行一遍。
你每输入一个字符就会触发输入框的onChange事件，调用state更新函数修改对应state，触发组件重渲染，顶层的console.log就会跟着执行一次，打印当前最新的state值，最终表现就是输入一个字符打印一次，看起来像是文本被逐字符拆分输出。

这个现象不是useState的取值逻辑错误，只是打印时机不符合预期，按实际需求调整打印位置即可：

• 如果需要在表单提交时拿到完整的输入值：给表单绑定onSubmit事件，在提交回调中获取state值即可，参考修改：

export default function Create() {
    const[firstName, setFirstName] = useState('');
    const[lastName, setLastName] = useState(''); // 修正原代码拼写错误：原setLasttName多写了一个t

    // 新增提交处理函数
    const handleSubmit = (e) => {
      e.preventDefault(); // 阻止表单默认跳转刷新行为
      console.log('提交的名：', firstName);
      console.log('提交的姓：', lastName);
      // 后续接口请求等业务逻辑写在这里
    }

  return (
      <div>
    <div>create</div>
    <div>
    {/* 给Form绑定提交事件 */}
    <Form onSubmit={handleSubmit}>
        {/* 原有表单项内容保持不变 */}
        <Form.Group className="mb-3" >
        <Form.Label>First Name</Form.Label>
        <Form.Control type="text" name='fName'  
        onChange={(e)=> setFirstName(e.target.value)} 
        placeholder="Enter first name" />
        </Form.Group>

        <Form.Group className="mb-3">
        <Form.Label>Last Name</Form.Label>
        <Form.Control type="text" name='lName'  
        onChange={(e)=> setLastName(e.target.value)} 
        placeholder="Enter last name" />
        </Form.Group>

        <Button variant="primary" type="submit">
        Submit
        </Button>
</Form>
    </div>
    </div>
  )
}

• 如果需要在输入值更新完成后自动打印值：使用useEffect监听对应state变化，在回调中打印即可，参考修改：

// 先引入useEffect
import React, {useState, useEffect} from 'react'

export default function Create() {
    const[firstName, setFirstName] = useState('');
    const[lastName, setLastName] = useState('');

    // 监听firstName、lastName变化，值更新完成后执行回调
    useEffect(() => {
      console.log('firstName最新值：', firstName);
      console.log('lastName最新值：', lastName);
    }, [firstName, lastName])

  // 其余return内容保持不变
}

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