如何使用setTimeout使列表项在单击后等待一段时间以恢复其原始颜色？

Question

我有列表项，单击一个列表项应将其变为红色，我希望每个单击的项目再次等待3000ms恢复其黑色，这是我的代码

我的试验是在setTimeout中使用useEffect并将所有red字段设置为false，但这没有用，特别是我需要使每个红色项都等待3000毫秒，然后由红色变为黑色”]

单击的第一个项目正确在3000毫秒后变黑，但之后项目变黑更快！

  const App = () => {
        const items = [
            {
                name: 'mark',
                id: 1,
                red: false
            },
            {
                name: 'peter',
                id: 2,
                red: false
            },
            {
                name: 'john',
                id: 3,
                red: false
            }
        ]

        const [names, setNames] = useState(items);

        const turnItemRed= (id) => {
            setNames(
                names.map(i =>  i.id === id ? {...i, red: true} : i))
        }

     // this doesn't work
     useEffect(() => {
         setTimeout(() => {
             setNames( prev => prev.map( i => ({...i, red: false})))
         }, 3000)
     })

        return (
            <div class="items-cont">
                <ul class="items">
                    {
                        names.map(i => {
                            return (
                                <Item
                                    item={i}
                                    turnItemRed={turnItemRed}
                                />
                            )
                        })
                    }
                </ul>
            </div>
        )
    }

    const Item = ({ item, ...props }) => {
        const { turnItemRed } = props;
        return (
            <li
                className={`${item.red ? 'red' : ''}`}
                onClick={() => {
                    turnItemRed(item.id)
                }}
            >
                {item.name}
            </li>
        )
    }
    ReactDOM.render(<App />, document.getElementById('root'))
CSS

：

.red {
     color: red
  }

    

我有列表项，单击一个列表项应将其变为红色，我希望每个单击的项目再次等待3000ms来恢复其黑色，这是我的代码，我的尝试是在useEffect中使用setTimeout ...

Answer 1

因为您的代码基本上将所有项目立即设置回原始颜色。尝试以下代码：注意：这是简单的方法，但是当您看到颜色red然后又返回原始颜色时，颜色不能保证3000毫秒，因为重新渲染组件要花费一些时间才能显示为红色

Answer 2

首先，useEffect每3秒运行一次，这意味着您的组件每3秒重新渲染一次，而没有UI实际更新。