useRef更新失效求助：无法为ref数组添加backgroundColor并更新state

核心问题 #

你的代码未达到预期效果，主要源于两个关键错误：

1. map方法不修改原数组：你调用clone.current.map(...)后，没有将返回的新数组赋值回clone.current——map只会生成新数组，不会改变原有数组内容，因此原ref数组里的元素根本没添加上backgroundColor属性，后续setData自然也不会同步变化。
2. State更新是异步的：setData([...clone.current])后立刻console.log(data)，打印的还是旧state值，因为React的state更新不会立即生效。

修正步骤 #

1. 更新useRef的数组内容：把map返回的新数组赋值给clone.current，确保ref里的元素带上新属性。
2. 正确查看最新state：若要查看更新后的data，通过useEffect监听data变化来打印，而非在setData后直接log。
3. 优化useRef初始化：因为存储的是数组，初始值设为[]比null更合理。

修正后的完整代码 #

import React from 'react'
import './MyProjects.css'
import {useState, useEffect, useRef} from 'react'

const MyProjects = () => {
    const [data, setData] = useState([])
    const clone = useRef([]); // 初始化为空数组

    async function fetchData() {
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/todos?userId=1')
            const json = await response.json()
            setData(json)
            clone.current = [...json]
        } catch (err) {
            console.log(err);
        }
    }

    useEffect(() => {
        fetchData()
        setTimeout(() => {
            // 将map生成的新数组赋值给clone.current，更新ref内容
            clone.current = clone.current.map(item => ({...item, backgroundColor: 'blue'}))
            console.log(clone.current) // 现在能看到带backgroundColor的元素
            setData([...clone.current])
        }, 4000)
    }, [])    

    // 监听data变化，打印最新state
    useEffect(() => {
        console.log('最新的data:', data)
    }, [data])

  return (
    <div className='project-container'>
        {data.length > 0 && (
                <div className='data-container'>
                {data.map(item => (
                    <div key={item.id} style={{backgroundColor : item.backgroundColor}} className='dataItem'>
                        {item.title}
                    </div>
                ))}
                </div>
        )}
    </div>
  )
}

export default MyProjects

额外说明 #

• useRef的.current属性确实不会触发组件重新渲染，适合存储这种需要保留且不影响渲染的状态副本，你的思路是正确的，只是操作数组时忽略了map的特性。
• 使用async/await时尽量避免和.then混用，统一用try/catch处理错误，代码逻辑会更清晰。

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