好的，所以我想在冒泡排序的每一步之后重新渲染我顯示的欄。但到目前為止，我的函式只在排序后重新渲染。有人可以就處理此問題的正確方法提出建議嗎？
function bubbleSort(array: number[]) {
var i;
var j;
for (i = 0; i < array.length; i ) {
// Last i elements are already in place
for (j = 0; j < array.length - i - 1; j ) {
// Checking if the item at present iteration
// is greater than the next iteration
if (array[j] > array[j 1]) {
// If the condition is true then swap them
var temp = array[j];
array[j] = array[j 1];
array[j 1] = temp;
}
alert(array);
setTimeout(() => {
forceUpdate();
}, 2000);
}
}
}
import { IonButton, IonInput } from '@ionic/react';
import React, { useState, useRef, useEffect } from 'react';
import './Sort.css';
interface ContainerProps {
name: string;
}
//try force updatae
function useForceUpdate() {
let [value, setState] = useState(true);
return () => setState(!value);
}
const Sort: React.FC<ContainerProps> = ({ name }) => {
//demo force uppdatge
let forceUpdate = useForceUpdate();
// param for the number of elements taht will be in the array
const [numberOfElements, setNumberOfElements] = useState(5);
// repeat value so that no style changes when main value is changes
const [numberOfElementsStyleInput, setNumberOfElementsStyleInput] =
useState(numberOfElements);
// param for the array itself
const [arrayOfElements, setArrayOfElements] = useState<number[]>([]);
//ref to outer block for divention retrivals
const outerUnit = useRef() as React.MutableRefObject<HTMLDivElement>;
//ref for dynamic scalling of outer-unit by getting container size params
const containerRef = useRef() as React.MutableRefObject<HTMLDivElement>;
//const to hold max after each new array gen
const [max, setMax] = useState<number>(0);
let myRefs: any = useRef([]);
// test useState for div dimentions
const [_heigth, set_heigth] = useState(0);
// generate array oif random number in range of block size and of count user input
const generateArrayOfnumbers = (numOfElements: number): number[] => {
let tempArray: number[] = [];
for (let index = 0; index < numOfElements; index ) {
let num: number = Math.floor(Math.random() * 47 3);
tempArray[index] = num;
}
return tempArray;
};
//get max value of array for scale neededs
function getMax(array: number[]) {
return array.reduce((a, b) => {
return Math.max(a, b);
});
}
function wait(ms: any) {
var start = new Date().getTime();
var end = start;
while (end < start ms) {
end = new Date().getTime();
}
}
//n^2
// Creating the bblSort function
function bubbleSort(array: number[]) {
var i;
var j;
for (i = 0; i < array.length; i ) {
// Last i elements are already in place
for (j = 0; j < array.length - i - 1; j ) {
// Checking if the item at present iteration
// is greater than the next iteration
if (array[j] > array[j 1]) {
// If the condition is true then swap them
var temp = array[j];
array[j] = array[j 1];
array[j 1] = temp;
}
alert(array);
setTimeout(() => {
forceUpdate();
}, 2000);
}
}
}
//Main return
return (
<div className="container" ref={containerRef}>
<strong>{name}</strong>
<div
id="outer-unit"
className="outer-unit-class"
ref={outerUnit}
style={
window.innerHeight > 1024
? {
height: window.innerHeight * 0.6 'px',
width: window.innerWidth * 0.6 'px',
position: 'relative',
}
: {
height: window.innerHeight * 0.4 'px',
width: window.innerWidth * 0.65 'px',
position: 'relative',
}
}
>
{/* {arrayOfElementsHeights.map((current_h, index) => {
let temp_array_H: number[] = [];
return setArrayOfElementsHeights();
})} */}
{arrayOfElements.map((currentElement, index) => {
return (
<div
ref={(ele: any) => (myRefs.current[index] = ele)}
key={index}
id={'inner-unit-' index}
className="inner-unit-class"
block-value={arrayOfElements[index]}
style={{
position: 'absolute',
left:
(outerUnit.current.clientWidth / numberOfElementsStyleInput) *
index
'px',
bottom: '0',
marginLeft: outerUnit.current.clientWidth * 0.006,
marginRight: outerUnit.current.clientWidth * 0.0015,
height:
outerUnit.current && max
? ((outerUnit.current.clientHeight -
outerUnit.current.clientHeight * 0.1) /
max) *
arrayOfElements[index]
_heigth
'px'
: '',
width: outerUnit.current
? outerUnit.current.clientWidth / numberOfElementsStyleInput -
(outerUnit.current.clientWidth / 100) * 1.5
'px'
: '',
backgroundColor: '#db7420',
}}
>
<h3>{arrayOfElements[index]}</h3>
</div>
);
})}
</div>
<IonInput
type="number"
value={numberOfElements}
placeholder="Enter Number"
className="input-num"
onIonChange={(e) => setNumberOfElements(parseInt(e.detail.value!, 10))}
></IonInput>
<IonButton
onClick={() => {
const data = generateArrayOfnumbers(numberOfElements);
setArrayOfElements(data);
setMax(0);
setMax(getMax(data));
setNumberOfElementsStyleInput(numberOfElements);
}}
>
Random generate
</IonButton>
<IonButton
onClick={() => {
bubbleSort(arrayOfElements);
}}
>
Bubble Sort
</IonButton>
<section className="info-section">
<h1>Bubble Sort algorithm using JavaScript</h1>
<p>
Bubble sort algorithm is an algorithm that sorts the array by
comparing two adjacent elements and swaps them if they are not in the
intended order. Here order can be anything like increasing order or
decreasing order.
</p>
<h2>How Bubble-sort works</h2>
<p>
We have an unsorted array arr = [ 1, 4, 2, 5, -2, 3 ] the task is to
sort the array using bubble sort. Bubble sort compares the element
from index 0 and if the 0th index is less than 1st index then the
values get swapped and if the 0th index is less than the 1st index
then nothing happens. then, the 1st index compares to the 2nd index
then the 2nd index compares to the 3rd, and so on…
</p>
</section>
<br />
</div>
);
};
export default Sort;更新：
async function bubbleSort(array: any) {
let isSorted = false;
while (!isSorted) {
isSorted = true;
for (let i = 0; i < array.length - 1; i ) {
if (array[i] > array[i 1]) {
[array[i], array[i 1]] = [array[i 1], array[i]];
isSorted = false;
setTimeout(() => {
setArrayOfElements(array.slice());
}, 2000);
}
}
}
return array;
}
bubbleSort(arrayOfElements.slice());
uj5u.com熱心網友回復：
所以，一般來說，React 組件會在輸入 Props 更改或鉤子更改時重新渲染。您正在對陣列進行原位排序，并在此程序中改變了 arrayOfElements。您的組件將在您使用后立即呈現正確的狀態setArrayOfElements。
快速查看您的示例，我會說有兩個步驟可以解決您的問題。
- 避免通過創建輸入陣列的副本直接改變狀態陣列，例如使用切片 api
onClick={() => {
bubbleSort(arrayOfElements.slice());
}}
- 在冒泡排序功能中更新您的狀態
...
alert(array);
setArrayOfElements(array.slice();
...
請注意，更新狀態將覆寫您的初始陣列，這可能不是您想要的。在這種情況下，我建議您創建兩個狀態變數，一個用于保存未排序的陣列，另一個用于保存當前狀態。
強制更新只是一個 hack，它不是在 React 中重新渲染問題的正確解決方案，因此您可以將其洗掉。
此外，您需要使您的 buble 排序異步并可能在迭代之間添加有意義的超時。如果函式不是異步的，您將不會看到任何漸進的狀態變化，因為將在冒泡排序函式完成后呈現下一個狀態。
uj5u.com熱心網友回復：
好的，這是我最終得到的解決方案：
// encapsulate setTimeout in a promise, so we can await it below
const wait = (timeout: any) => {
return new Promise((resolve) => {
setTimeout(resolve, timeout);
});
};
//n^2
// Creating the bblSort function
async function bubbleSort(array: any) {
let isSorted = false;
while (!isSorted) {
isSorted = true;
for (let i = 0; i < array.length - 1; i ) {
if (array[i] > array[i 1]) {
[array[i], array[i 1]] = [array[i 1], array[i]];
isSorted = false;
setArrayOfElements(array.slice());
await wait(1000);
}
}
}
return array;
}
<IonButton
onClick={() => {
bubbleSort(arrayOfElements.slice());
}}
>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/390555.html
上一篇：Json模式陣列大小參考