Question

我在反应中的功能组件中遇到setState问题。我正在尝试构建一个带有反应的可视化器。我的功能组件具有一个名为array的状态属性，该状态属性是一个随机数数组，使用该数组我将创建一个由div样式的“ Bars”数组并将其显示在屏幕上。

在我组件的handleClick（）函数中，我正在创建状态存储的数组的副本，并且在每次迭代中，我都在该副本上交换值。我的问题是，在交换副本中的这些值之后，我试图使用setArray将数组更新为具有交换值的副本的新版本，但这不起作用。我试图在超时内更改tempArray和array，因为每次交换之间都需要延迟。 tempArray在每次迭代中都正确更改，但是数组完全没有更改。

我相信这是了解问题的足够信息，但是如果您需要更多上下文，我会在代码后添加。

import React, { useState } from "react";

function DisplayVector() {
  let [array, setArray] = useState(vector);

  let vectorBars = array.map((num, index) => {
    let height = `${num * 2}%`;
    let width = `${90 / vector.length}%`;
    return <Bar key={index} width={width} height={height}></Bar>;
  });

  function handleClick() {
    let [comparisions, swaps] = bubble_Sort(array);
    let tempArr = [...array];
    for (let i = 0; i < comparisions.length; i++) {
      setTimeout(() => {
        let [firstIndex, secondIndex] = comparisions[i];
        if (swaps[i]) {
          [tempArr[firstIndex], tempArr[secondIndex]] = [
            tempArr[secondIndex],
            tempArr[firstIndex],
          ];
        }
        setArray(tempArr);
      }, i * 1000);
    }
  }

  return (
    <React.Fragment>
      <Wrapper>{vectorBars}</Wrapper>
      <button onClick={handleClick}>touch me</button>
    </React.Fragment>
  );
}

单击功能部件上的按钮后，将调用功能handleClick（）。此函数调用bubbleSort返回一个由两个数组组成的数组。第一个称为比较，它由包含与bubbleSort在对算法进行排序时进行的所有比较对应的索引的数组组成的数组（例如，对于bubbleSort比较的每个索引值，[1,2]，[2,3]等）。第二个包含布尔值，其中每个布尔值对应于bubbleSort所比较的一组索引，如果布尔值为true，则意味着必须交换索引，如果为false，则不必交换索引。我用开发工具调试了handleClick函数，发现tempArray实际上正在交换交换中的值，即swap为true，但是setArray（tempArray）不能正常工作，状态数组根本没有改变。

为什么setState无法与setTimeout一起正常使用？

0 个答案: