我在這里有一個簡單的組件，我在其中設定了一個稱為input數字陣列值的狀態變數。然后，useEffect我在內部呼叫一個隨機化初始狀態陣列的函式，并將結果放入一個名為 的新狀態變數中output。
我需要我的輸入陣列保持相同的順序。但是，當我呼叫該shuffleArray函式時，它正在發生變異。
我認為沒有辦法改變作為引數傳遞的變數所持有的值，如果 JavaScript 支持按參考傳遞，這將是可能的。
const App = () => {
const [input, setInput] = React.useState([90, 32, 28, 8, 21, 24, 64, 92, 45, 98, 22, 21, 6, 3, 27, 18, 11, 56, 16, 42, 36, 2, 60, 38, 24, 8, 16, 76, 62, 14, 84, 32, 24, 18, 8, 5, 25, 68, 65, 26, 22, 2, 52, 84, 30, 8, 2, 90, 5, 34, 56, 16, 42, 36]);
const [output, setOutput] = React.useState([]);
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i 1));
let temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
React.useEffect(() => {
setOutput(shuffleArray(input));
}, [])
return (
<div>
[
{
input.length > 0 ?
input.map((n, i) => (
<span key={i}>
{ (i? ", " : "") n }
</span>
))
:
"No array..."
}
]
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
輸入已更改，因為這是按值傳遞的作業方式。原語不能在沒有重新分配的情況下發生變異。但是，當涉及到物件（和陣列，如本例）時，物件的屬性可以在不重新分配的情況下進行變異。
如果你想保持輸入不變，你可以使用Array.from并操作陣列的副本。
const App = () => {
const [input, setInput] = React.useState([90, 32, 28, 8, 21, 24, 64, 92, 45, 98, 22, 21, 6, 3, 27, 18, 11, 56, 16, 42, 36, 2, 60, 38, 24, 8, 16, 76, 62, 14, 84, 32, 24, 18, 8, 5, 25, 68, 65, 26, 22, 2, 52, 84, 30, 8, 2, 90, 5, 34, 56, 16, 42, 36]);
const [output, setOutput] = React.useState([]);
const shuffleArray = (array) => {
const shuffled = Array.from(array);
for (let i = shuffled.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i 1));
let temp = shuffled[i];
shuffled[i] = shuffled[j];
shuffled[j] = temp;
}
return shuffled;
}
React.useEffect(() => {
setOutput(shuffleArray(input));
}, [])
return (
<div>
[
{
input.length > 0 ?
input.map((n, i) => (
<span key={i}>
{ (i? ", " : "") n }
</span>
))
:
"No array..."
}
]
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
Javascript 實際上通過“參考副本”傳遞物件和陣列，如此 SO 答案中所述：https : //stackoverflow.com/a/13104500/17704187
所以你的shuffleArray函式實際上改變了輸入陣列的內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/383858.html
標籤：javascript 反应