【问题标题】：Why icon "car" cannot move following "path" in svg? [closed]为什么图标“汽车”不能在 svg 中跟随“路径”移动？ [关闭]
【发布时间】：2021-09-18 09:16:42
【问题描述】：

点击“下一步”后路径改变颜色但“汽车”无法移动

当我设置状态时

但是如果setState在

const [position, setPosition] = useState('here!!! I set positon')

汽车移动。什么问题？？？

完整代码。抱歉，我无法在此处添加代码

【问题讨论】：

欢迎堆栈溢出！如果您编辑问题并将代码直接添加到其中（作为文本），您将获得更多帮助。这样我们就可以轻松阅读您的代码并将其复制/粘贴到我们的答案中。
我相信我看到了这个问题并在下面回答了，但请编辑您的问题以包含正确格式的代码 sn-ps。图片很好，但它们不可搜索，不可复制/粘贴，而且更难阅读。
您好，请查看我的回答是否有助于解决/解决您的问题/问题。

标签： reactjs svg use-effect use-state

【解决方案1】：

问题

您正在改变PathMove 函数中的状态。 clone 实际上并不是array 的克隆，而只是它的浅拷贝。数组中的所有元素都是对原始数组中元素的引用。

const PathMove = value => {
  const clone = [...array];
  const index = clone.findIndex(x => x.id === value);
  for (let i = 0; i < index; i++) {
    clone[i].status = true; // <-- state mutation!!
  }
  return setArray(clone);
};

解决方案

除了对数组进行浅拷贝外，您还需要对正在更新的所有元素和嵌套状态进行浅拷贝。在这种情况下，您似乎正在更新它们。

这里我使用功能状态更新来更新之前的状态（不是回调中包含的状态）。浅拷贝数组，然后浅拷贝正在更新的元素。

const PathMove = value => {
  setArray(array => {
    const index = array.findIndex(x => x.id === value);

    return array.map((el, i) => i < index ? {
      ...el,        // <-- shallow copy element
      status: true, // <-- update status property
    } : el);
  });
};

【讨论】：