javascript - 反应 useState 以更新其数组中的特定项目

Question

我里面有一组图像refData。然后我将它们映射到一个 img 对象数组中RefItem。然后，我希望将 thouse 特定图像更改为一行中的下一个 - 所以 img 0 变为 1，而 1 变为 2 - 如refbox. 我只是想不通这个..我只想更新每个数组项中的单个数字？

import React, {useState, useEffect} from 'react'
import refData from './refData'
import RefItem from './refItem'

function ReferencesPP(){
    const refItems = refData.map(item => <RefItem key={item.id} pitem={item}/>)

    const [refs, setRefs] = useState([0, 1, 2, 3])

    useEffect(() => {
        const intervalId = setTimeout(() => {
            for(let i = 0; i < refs.length; i++){
                if(refs[i] !== refData.length){
                    setRefs(...refs[i], refs[i] = refs[i] + 1)
                } else {
                    setRefs(...refs[i], refs[i] = 0)
                }
            }
        }, 2000);
        return () => clearTimeout(intervalId);
    }, [refs]);

    return(
        <div className="referencespp-container">
            <div className="background-container" />
            <div className="content-container">
                <div id="refbox"> 
                    {refItems[refs[0]]}
                    {refItems[refs[1]]}
                    {refItems[refs[2]]}
                    {refItems[refs[3]]}
                </div>
            </div>
        </div>
    )
}

export default ReferencesPP 

我以为它会像写作一样简单

const refs = [0, 1, 2, 3]
useEffect(() => {
    const intervalId = setInterval(() => {
        for(let i = 0; i < refs.length; i++){
            if(refs[i] !== refData.length){
                refs[i] = refs[i] + 1;
            } else {
                refs[i] = 0;
            }
        }
    }, 2000);
    return () => clearInterval(intervalId);
}, []);

但这样做只会更新元素const而不是{refItems[refs[0]]}元素？

标签： javascriptreactjs

Answer 1

看看这个https://jsfiddle.net/gwbo4pdu/我认为这是你想要得到的

 React.useEffect(() => {
    const intervalId = setTimeout(() => {
       const newRefs = [...refs]
       const i = newRefs.shift()
       newRefs.push(i)
       setRefs(newRefs);
    }, 2000);
    return () => clearTimeout(intervalId);
}, [refs]);

PS你可以做的只是newRefs.push(newRefs.shift())