时间戳

首页 > 解决方案 > 没有使用 useState() 更新反应状态

javascript - 没有使用 useState() 更新反应状态

问题描述

我想更新一个多维数组。
我有这个状态变量。

const [travelledDataSet, setTravelledDataSet] = useState(JSON.parse(JSON.stringify(solidDataSet)));

实体数据集的结构最初是。

export const solidDataSet = [
    [
        [76.92025126928692, 31.815485031139886]
    ],
    [
        [76.92737521643127, 31.76427071949966]
    ],
    [
        [76.91587390417601, 31.75230203493911]
    ]
]

一旦触发更新功能，我必须定期更新此数据。

const update=()=>{
        if(i>=dataSet[0].length) return;
        let tempData = JSON.parse(JSON.stringify(travelledDataSet));
        tempData[0].push(dataSet[0][i]);
        setTravelledDataSet(tempData);
        i++; // increment to next position
        setTimeout(update,100)
    }

虽然状态更新，但travelledDataSet[0]大小仍然为 2。而且，travelledDataSet[0][1]只是在更新。
例如

// first__update__is
// -- travelledDataSet[0] --
[76.92025126928692, 31.815485031139886]
[77.06221522802589, 31.75536733328293]

// in__second__update
// --travelledDataSet[0]--
[76.92025126928692, 31.815485031139886]
[77.0603269528807, 31.75317784482199] -- only this is being updated each time.

为了检查为什么这不起作用，我在更新函数之外创建了另一个变量（不是反应状态）。

let ar=JSON.parse(JSON.stringify(travelledDataSet))
    const update=()=>{
        if(i>=dataSet[0].length) return;
        let tempData = JSON.parse(JSON.stringify(travelledDataSet));
        tempData[0].push(dataSet[0][i]);
        ar[0].push(dataSet[0][i]);
        console.log("AR: ",ar[0],"Data:",travelledDataSet[0]); // ---- this is updating
        setTravelledDataSet(tempData);
        i++; // increment to next position
        setTimeout(update,10)
    }

功能完成后，此代码console.log("AR: ",ar[0],"Data:",travelledDataSet[0])打印。 在此处输入图像描述

您可以在下图中看到，ar[0]长度为 58，而travelledDataSet[0]长度仅为 1。

即使这也不起作用setTravelledDataSet(JSON.parse(JSON.stringify(tempData)));

可重现的代码：

// it will render solid route indecating traveled route
    const [travelledDataSet, setTravelledDataSet] = useState(JSON.parse(JSON.stringify(solidDataSet)));
    // update route -- only in development for simulation purpose
    let i = 1;
    const update=()=>{
        if(i>=dataSet[0].length) return;
        let tempData = JSON.parse(JSON.stringify(travelledDataSet));
        tempData[0].push(dataSet[0][i]);
        setTravelledDataSet(JSON.parse(JSON.stringify(tempData)));
        i++; // increment to next position
        setTimeout(update,10)
    }
    useEffect(()=>{
        setTravelledDataSet(JSON.parse(JSON.stringify(solidDataSet)));
        if(display)
            update()
    },[display])

每当display发生变化时，我必须从一开始就做同样的事情。该组件大约有数千行代码。我在这里添加可以简要解释问题的代码。

标签： javascriptreactjsuse-state

解决方案

你为什么要进行递归定时调用来更新；setTimeout(update, 10)在里面打电话update()？这个成语我以前没见过，看起来很腥。也许看看setInterval？

还要考虑useEffect使用钩子来处理数据更改时的副作用，而不是箭头函数。

我认为你应该重构这段代码。很难阅读。

推荐阅读