Question

我有这个代码：

const drawLine = (x: number, y: number) => {
    setLineCord((prevCords) => [...prevCords, x, y])

    if (lineCord.length > 2) {
      setEdges((prevLines) => [
        ...prevLines,
        {
          points: lineCord,
          stroke: 'black',
          strokeWidth: 2,
        },
      ])
      setLineCord((prev) => [])
    }
  }

基本上，当我调用此函数时，我将两个新元素添加到数组 LineCord 中，该数组被定义为组件状态中的变量。之后我想使用新的 LineCord 数组并根据数组的长度做一些逻辑（if 语句中的代码）。

问题是，if 语句中的代码不会在 setLineCord 之后执行，因为 react 钩子是异步运行的，所以当我检查它的长度时，它仍然会更少尽管我添加了两个新元素（x 和 y），但仍然是 2。

我尝试过的一种解决方案是使用 react useEffect 并将 LineCord 设置为依赖项。这完全没问题，但我想知道是否有更好的解决方案来解决这样的问题，我必须更新状态变量并在更新后在某处使用它的新值。

Answer 1

您可以创建新的常量并在更新其值后立即使用它而不是状态变量

尝试以下操作：-

const drawLine = (x: number, y: number) => {
    const updatedLineCord = [...lineCord, x, y]
    setLineCord([...updatedLineCord])

    if (updatedLineCord.length > 2) {
      setEdges((prevLines) => [
        ...prevLines,
        {
          points: updatedLineCord,
          stroke: 'black',
          strokeWidth: 2,
        },
      ])
      setLineCord([])
    }
  }

React Hooks：如何根据另一个状态变量更新来更新状态变量

1 个答案: