React中useState设置数据失败求助：点击按钮更新列表异常

你的代码存在几个关键问题，导致出现预期外的结果，以下是具体分析和修正方案：

1. 语法错误 #

箭头函数写法有误，() = { 需改为 () => {，否则代码无法正常运行：

• export const profile = () = { → export const profile = () => {
• const onClickAdd = () = { → const onClickAdd = () => {

2. useRef 使用逻辑错误 #

你在组件每次渲染时都直接给 newData.current 赋值 ['abc']，这会覆盖之前的修改——组件每次重渲染都会执行这段代码，useRef 的持久化特性完全没发挥作用。

3. 数组嵌套导致显示异常 #

在 useEffect 里，nData 是数组 ['bbbbcc']，你用 [...newData.current, nData] 合并时，是把整个 nData 数组作为元素插入，最终得到 ['abc', ['bbbbcc']]，这就是控制台显示 [Object Object] 的原因（第二个元素是数组，被简化显示）。

4. setState 的异步特性 #

React 的 setData 是异步操作，调用 setData 后立刻 console.log(data)，拿到的是更新前的旧 state 值，不是刚设置的新值。

符合你需求的函数式修正方案 #

如果倾向于用函数式方式更新状态，无需依赖 useRef，直接利用 setState 的函数形式即可，它会自动接收当前最新的 state：

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

export const Profile = () => {
    // 初始化初始数据
    const [data, setData] = useState(['abc'])

    const onClickAdd = () => {
        // 函数式更新，prevData 是当前最新的 state
        setData(prevData => {
            const newItem = 'bbbbcc'
            // 合并新数据，保证 state 不可变性
            return [...prevData, newItem]
        })
    }

    // 监听 data 变化，打印最新值
    useEffect(() => {
        console.log('当前最新数据：', data)
    }, [data])

    return (
        <>
            <button onClick={onClickAdd}>Add data</button>
            {/* 渲染列表直观查看结果 */}
            <ul>
                {data.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </>
    )
}

关键说明 #

• 函数式更新的优势：当新状态依赖旧状态时，setData(prev => newState) 能确保拿到最新的状态值，避免异步更新导致的状态不一致。
• 保持 state 不可变性：永远不要直接修改原数组，通过展开运算符创建新数组，符合 React 的状态更新规范。
• 查看更新后的值：若需在状态更新后执行操作或查看值，用 useEffect 监听 data 变化即可。

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