React首次点击按钮数据不显示，需双击才生效的问题咨询与解决

问题代码 #

import React from 'react'
import { useState } from 'react'
const App = () => {

    const [txt,setTxt] = useState("")
    const [num,setNum]= useState(0);
    const [data, setData]=useState([]);
 
    const Clicked = ()=>{
        const obj={
            id: data.length === 0 ? 1 : data[data.length-1].id +1,
            str:txt,
            tot:num,
        }
        setData([...data,obj])
        console.log(data)
    }
  return (
    <div>
        <div className='input-section'>
            <h4>input your data here</h4>
            <input type="text" onChange={(e)=>setTxt(e)}/>
            <h4>it is for number</h4>
            <input type="number" onChange={(e)=>setNum(e)}/><br />
            <br />
            <button onClick={Clicked}>Send the data</button>
        </div>
    </div>
  )
}

export default App

问题现象 #

填写输入框内容后点击按钮，控制台输出的data数组为空，无法获取填写的数据；仅双击按钮时才能成功添加数据。

原因分析 #

1. useState 异步更新特性：React的useState更新是异步批量处理的，调用setData后立即console.log(data)，拿到的是更新前的旧状态。第一次点击时控制台显示空数组，第二次点击才会看到第一次添加的数据，这是因为此时状态已经完成第一次更新。
2. 输入值绑定错误：输入框onChange回调直接把事件对象e传给setTxt和setNum，而非实际输入的e.target.value。这会导致txt和num存储的是事件对象，而非用户输入的文本/数字，所以即使添加到data里也不是预期内容，双击时的偶然生效是事件对象复用等特殊情况导致的。

解决步骤 #

1. 修正输入值绑定

把onChange中的参数改为e.target.value，数字输入框还需要转成数值类型：

<input type="text" onChange={(e) => setTxt(e.target.value)} />
<input type="number" onChange={(e) => setNum(Number(e.target.value))} />

2. 正确处理异步状态更新

如果需要在更新后获取最新的data状态，推荐使用函数式更新，确保基于最新的前序状态计算新值，同时可以直接在函数内打印最新数据：

const Clicked = () => {
    setData(prevData => {
        const obj = {
            id: prevData.length === 0 ? 1 : prevData[prevData.length - 1].id + 1,
            str: txt,
            tot: num,
        }
        const newData = [...prevData, obj];
        console.log(newData); // 这里直接拿到最新数组
        return newData;
    })
}

或者通过useEffect监听data变化，在状态更新完成后执行日志：

import React, { useState, useEffect } from 'react'

// ... 其他代码不变

useEffect(() => {
    console.log(data);
}, [data]);

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