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

Question

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

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 发生变化时，我必须从一开始就做同样的事情。该组件大约有数千行代码。我在这里添加代码，可以简要说明问题。

Answer 1

为什么要递归定时调用更新；在update() 内调用setTimeout(update, 10)？这个成语我以前没见过，看起来很腥。或许看看setInterval？

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

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

Answer 2

您的“循环计数器”i 在每个渲染周期重新声明，即每次组件渲染 i 等于 1。

由于我仍然不清楚为什么状态如此复杂以及您的状态更新在这里试图完成的事情，我认为这可能是一个简单的“修复”。使用 i 循环计数作为传递的参数，并在启动递归时最初传递 1。您还应该将 update 函数声明移动到 useEffect 挂钩中，以将其作为依赖项删除。

useEffect(() => {
  const update = (i) => { // <-- consume i loop counter
    if(i >= dataSet[0].length) return;

    const tempData = JSON.parse(JSON.stringify(travelledDataSet));
    tempData[0].push(dataSet[0][i]);
    setTravelledDataSet(JSON.parse(JSON.stringify(tempData)));
    
    setTimeout(() => update(1 + 1), 10); // <-- increment i
  }

  setTravelledDataSet(JSON.parse(JSON.stringify(solidDataSet)));

  if (display) {
    update(1); // <-- initial seed 1
  }
}, [display])