標題標簽應以“Marco”開頭，按鈕顯示“polo”。onClick 他們應該互換。我正在使用 useState 和一個陣列來完成這項作業。他們應該不斷交換。但在一輪之后，他們會重復。估計在第三輪。我不明白為什么會這樣。
import React, { useState } from "react"; import "../styles/App.css"; const App = () => { let arr = ["Marco", "Polo"]; const [input, setInput] = useState(arr[0]); const [inputButton, setInputBUtton] = useState(arr[1]); const changethis = () => { // console.log("Clicked"); // console.log(arr); let temp = arr[0]; arr[0] = arr[1]; arr[1] = temp; console.log(arr); setInput(arr[0]); setInputBUtton(arr[1]); }; return ( <div id="main"> <h1 id="marco-polo">{input}</h1> <button id="marco-polo-toggler" onClick={changethis}> {inputButton} </button> </div> ); }; export default App;
當我控制臺記錄我的陣列時，我得到了這樣的結果。
(2) ['Polo', 'Marco']
(2) ['Polo', 'Marco']
(2) ['Marco', 'Polo']
(2) ['Polo', 'Marco']
(2) ['Polo', 'Marco']
(2) ['Marco', 'Polo']
(2) ['Polo', 'Marco']
uj5u.com熱心網友回復：
問題是每次更改狀態時，組件都會重新渲染并且您的狀態會arr被重置
您可以將陣列放在組件之外，這樣就不會在每次渲染時都重新定義它，或者您可以使用狀態索引來代替
解決方案 1
import React, { useState } from "react";
import "../styles/App.css";
let arr = ["Marco", "Polo"];
const App = () => {
const [input, setInput] = useState(arr[0]);
const [inputButton, setInputBUtton] = useState(arr[1]);
const changethis = () => {
// console.log("Clicked");
// console.log(arr);
let temp = arr[0];
arr[0] = arr[1];
arr[1] = temp;
console.log(arr);
setInput(arr[0]);
setInputBUtton(arr[1]);
};
return (
<div id="main">
<h1 id="marco-polo">{input}</h1>
<button id="marco-polo-toggler" onClick={changethis}>
{inputButton}
</button>
</div>
);
};
export default App;
解決方案 2
import React, { useState } from "react";
import "../styles/App.css";
const App = () => {
let arr = ["Marco", "Polo"];
const [input, setInput] = useState(0);
const [inputButton, setInputBUtton] = useState(1);
const changethis = () => {
// console.log("Clicked");
// console.log(arr);
setInput(i => (i 1) % arr.length);
setInputBUtton(i => (i 1) % arr.length);
};
return (
<div id="main">
<h1 id="marco-polo">{arr[input]}</h1>
<button id="marco-polo-toggler" onClick={changethis}>
{arr[inputButton]}
</button>
</div>
);
};
export default App;
uj5u.com熱心網友回復：
問題
arr在每個渲染周期都使用該值重新宣告，["Marco", "Polo"]并且每三次交換它們時，排隊狀態更新為與狀態已經相同的值，因此跳過重新渲染。
解決方案
將arr陣列宣告移到組件外，使其參考穩定。而不是改變arr每個渲染周期重新宣告的變數，您應該只交換狀態值。
例子：
const arr = ["Marco", "Polo"];
export default function App() {
const [input, setInput] = useState(arr[0]);
const [inputButton, setInputBUtton] = useState(arr[1]);
const changethis = () => {
setInput(inputButton);
setInputBUtton(input);
};
return (
<div id="main">
<h1 id="marco-polo">{input}</h1>
<button id="marco-polo-toggler" onClick={changethis}>
{inputButton}
</button>
</div>
);
}
如果您仍想交換arr陣列值，您仍應將arr陣列移出組件，這樣它的值就不會在每次渲染時重置。使用陣列解構賦值來交換陣列值。
例子：
const arr = ["Marco", "Polo"];
export default function App() {
const [input, setInput] = useState(arr[0]);
const [inputButton, setInputBUtton] = useState(arr[1]);
const changethis = () => {
[arr[1], arr[0]] = [arr[0], arr[1]]; // swap element values
console.log(arr);
setInput(arr[0]);
setInputBUtton(arr[1]);
};
return (
<div id="main">
<h1 id="marco-polo">{input}</h1>
<button id="marco-polo-toggler" onClick={changethis}>
{inputButton}
</button>
</div>
);
}
uj5u.com熱心網友回復：
您可以在狀態下管理您的陣列，然后您可以非常輕松地執行操作。也許下面的代碼會對你有所幫助。
import React, { useState } from 'react';
import './style.css';
export default function App() {
const [arr, setArray] = useState(['Marco', 'Polo']);
const [input, setInput] = useState(arr[0]);
const [inputButton, setInputBUtton] = useState(arr[1]);
const changethis = () => {
let temp = [];
temp.push(arr[1], arr[0]);
console.log(arr);
setArray(temp);
setInput(arr[0]);
setInputBUtton(arr[1]);
};
return (
<div id="main">
<h1 id="marco-polo">{input}</h1>
<button id="marco-polo-toggler" onClick={changethis}>
{inputButton}
</button>
</div>
);
}
uj5u.com熱心網友回復：
您有 2 個單詞“Marco”和“Polo”，它們在標題和按鈕之間切換。因此，您的App組件需要將訂單存盤在其state.
class App extends React.Component {
constructor(props) {
super(props);
// store word order in state
this.state = {words: ['Marco','Polo']};
}
// use arrow functions for event listeners to avoid "this" problem
invert=(evt)=> {
// use callback argument of setState when using current state value
this.setState((state)=>{
// reverse word order
return state.words.reverse();
});
}
// show 1st word in h1 & 2nd word in button
render() {
return (
<div id="main">
<h1 id="marco-polo">{this.state.words[0]}</h1>
<button id="marco-polo-toggler" onClick={this.invert}>
{this.state.words[1]}
</button>
</div>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491220.html
標籤：javascript 反应 反应钩子