Reactjs 在React中呈现数组排序的每次迭代

我正在尝试在react中构建一个简单的应用程序，它接受一个未排序的数组（this.state.dataset），然后插入对其进行排序，并呈现排序过程的每个迭代

因为React是异步的，所以在每次数组更改之后放置一个setstate不起作用。有什么办法可以解决这个问题吗

我可以通过冒泡排序来实现这一点，只需在每次数组更改后退出函数，然后渲染它，然后使用更新的数组重新启动冒泡排序。然而，我无法在这里使用这种方法。我知道效率很低，很抱歉我是新手

render() {
    return (
        <div className="buttons">
          <button onClick={this.sort}>Insertion Sort</button>
        </div>
    );
  }

sort(e) {
    this.myInterval = setInterval(() => {
        let arr = this.insertionSort();
        this.setState({
          dataset: arr,
        });
      }
    }, 1000);
  

insertionSort(e) {
    let inputArr = this.state.dataset
    let length = inputArr.length;
    for (let i = 1; i < length; i++) {
        let key = inputArr[i];
        let j = i - 1;
        while (j >= 0 && inputArr[j] > key) {
            inputArr[j + 1] = inputArr[j];
            j = j - 1;
        return inputArr //Added by me to stop loop and render (probably wrong solution)
        }
        inputArr[j + 1] = key;
    return inputArr //Added by me to stop loop and render (probably wrong solution)
    }
    return inputArr;
};

render（）{
返回(
插入排序
);
}
排序（e）{
this.myInterval=setInterval（（）=>{
设arr=this.insertionSort（）；
这是我的国家({
数据集：arr，
});
}
}, 1000);
插入排序（e）{
让inputArr=this.state.dataset
让长度=inputArr.length；
for（设i=1；i=0&&inputArr[j]>键）{
inputArr[j+1]=inputArr[j]；
j=j-1；
return inputArr//由我添加到停止循环和渲染（可能是错误的解决方案）
}
inputArr[j+1]=键；
return inputArr//由我添加到停止循环和渲染（可能是错误的解决方案）
}
返回输入端；
};

---

（我在render（）方法中使用this.state.dataset呈现，但为了简洁起见，排除了该方法。

一种可能的解决方案可能是将迭代数组所需的值存储在状态中。每次修改时，您都可以更新状态并从排序函数返回

因为React是异步的，在每次数组更改后放置一个setState是不起作用的。有什么办法解决这个问题吗

setState函数接受在状态更新时调用的第二个回调参数。这意味着您可以有效地将状态更新视为同步更新

下面是使用此方法的示例：

（这是用React Native编写的，但逻辑与常规React相同）

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
一:1,，
j:0，
数据：[…初始数据]，
};
}
render（）{
返回(
{item}
/>
);
}
排序=（）=>{
const{i，j，key，data:oldData}=this.state；
const nextSort=（）=>setTimeout（this.sort，500）；
if（i==oldData.length）{
返回；
}
常量数据=[…旧数据]；
常量值=键？键：数据[i]；
如果（j>=0&&data[j]>值）{
数据[j+1]=数据[j]；
setState（{j:j-1，数据，key:value}，nextSort）；
返回；
}
数据[j+1]=数值；
setState（{i:i+1，j:i，data，key:undefined}，nextSort）；
};
reset=（）=>this.setState（{data:[…initialData]，i:1，j:0，key:undefined}）；
} 

在您现有的实现中值得一提的最后一件事是状态的变化。当您的状态中有一个数组时，您不能修改该数组，因为这将在调用setState时引起问题

例如，您的变量

dataSet

存储在状态中。然后，您可以使用以下命令将

inputArr

设置为状态值

dataSet

的引用：

let inputArr=this.state.dataset

当您现在调用

inputArr[j+1]=inputArr[j]；

时，原始数组（在您的状态下）将被更新。如果您使用

inputArr

调用setState，React会将其与

dataSet

进行比较。当您修改

dataSet

时，值将匹配

inputArr

，这意味着状态不会更新

您可以在我的解决方案中看到此问题的解决方法，我使用以下方法将数据集复制到一个新数组中：

const data=[…oldData]

---

这将阻止处于您状态的数组更新。

一种可能的解决方案可能是存储在该状态下迭代数组所需的值。每次修改时，您都可以更新状态并从排序函数返回

因为React是异步的，在每次数组更改后放置一个setState是不起作用的。有什么办法解决这个问题吗

setState函数接受在状态更新时调用的第二个回调参数。这意味着您可以有效地将状态更新视为同步更新

下面是使用此方法的示例：

（这是用React Native编写的，但逻辑与常规React相同）

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
一:1,，
j:0，
数据：[…初始数据]，
};
}
render（）{
返回(
{item}
/>
);
}
排序=（）=>{
const{i，j，key，data:oldData}=this.state；
const nextSort=（）=>setTimeout（this.sort，500）；
if（i==oldData.length）{
返回；
}
常量数据=[…旧数据]；
常量值=键？键：数据[i]；
如果（j>=0&&data[j]>值）{
数据[j+1]=数据[j]；
setState（{j:j-1，数据，key:value}，nextSort）；
返回；
}
数据[j+1]=数值；
setState（{i:i+1，j:i，data，key:undefined}，nextSort）；
};
reset=（）=>this.setState（{data:[…initialData]，i:1，j:0，key:undefined}）；
} 

在您现有的实现中值得一提的最后一件事是状态的变化。当您的状态中有一个数组时，您不能修改该数组，因为这将在调用setState时引起问题

例如，您的变量

dataSet

存储在状态中。然后，您可以使用以下命令将

inputArr

设置为状态值

dataSet

的引用：

let inputArr=this.state.dataset

现在调用

inputArr[j+1]=inputArr[j]；export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      i: 1,
      j: 0,
      data: [...initialData],
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => <Text>{item}</Text>}
        />
        <Button title="Sort" onPress={this.sort} />
        <Button title="Reset" onPress={this.reset} />
      </View>
    );
  }

  sort = () => {
    const { i, j, key, data: oldData } = this.state;
    const nextSort = () => setTimeout(this.sort, 500);

    if (i == oldData.length) {
      return;
    }

    const data = [...oldData];
    const value = key ? key : data[i];

    if (j >= 0 && data[j] > value) {
      data[j + 1] = data[j];
      this.setState({ j: j - 1, data, key: value }, nextSort);
      return;
    }

    data[j + 1] = value;
    this.setState({ i: i + 1, j: i, data, key: undefined }, nextSort);
  };

  reset = () => this.setState({ data: [...initialData], i: 1, j: 0, key: undefined });
}