您好，感謝您的幫助，使用以下代碼進行反應，我想在每次單擊時復制單擊按鈕。目前沒有任何反應，但如果控制臺顯示陣列增長。這里是沙箱：
https://codesandbox.io/s/charming-glitter-0ntxmj?file=/src/App.js
const { useEffect, useState } = React;
function App() {
const btn = [
<button
onClick={() => {
btn.push(btn[0]);
console.log(btn);
}}
>
Click
</button>
];
/* useEffect(()=>{
btn
},[btn])*/
return (
<div className="App">
<div>
{btn.map((e) => {
return e;
})}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
更新函陣列件中的區域變數不是這樣。它的行為就像一個正常的函式，btn只存在于App().
為了在渲染中保持值，您需要使用state。然而，狀態和道具的更新是唯一導致重新渲染的事情，所以App可能只在一開始就被渲染一次。
如果直接將其轉換為使用狀態，則會遇到將組件存盤在狀態中的反模式。為避免這種情況，我們應該修改邏輯以僅在狀態陣列中存盤一些通用項，以便我們的渲染邏輯可以使用它來確定要渲染多少按鈕。
考慮以下選項：
const { useState } = React;
function App() {
const [btns, setBtns] = useState(['value'])
function handleAdd() {
setBtns((prev) => ([...btns, 'value']));
}
return (
<div className="App">
<div>
{btns.map((e) => (
<button
onClick={handleAdd}
>
Click
</button>
))}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>您可以通過僅在您的狀態中存盤按鈕的數量來進一步簡化：
const { useState } = React;
function App() {
const [btnCount, setBtnCount] = useState(1)
function handleAdd() {
setBtnCount(btnCount 1);
}
return (
<div className="App">
<div>
{Array.from({ length: btnCount}).map((e) => (
<button
onClick={handleAdd}
>
Click
</button>
))}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
是的，對您的組件進行了更改，是的，您可以在控制臺中看到它們，但是
- App 函式只是一個函式，每次運行時都會創建陣列，并且始終具有相同的值（一個元素）。
- 除非組件的狀態或道具發生變化，否則 React 不會更新。
- 即使您的 App 功能更新，在反應更新中意味著 React 將再次重新運行相同的功能（您最終總是在陣列中有一個元素）。
所以要解決這個問題，你可以使用 state，即使 App 仍然是一個函式，useState 會保證如果陣列的值發生變化，React 會為你記住變化，并且 React 也會在 state 時重新渲染你的組件變化。
還請記住，您只能使用提供的函式來更改狀態的值，并且更改setBtns不會btns更新您的組件，并且狀態的更改始終是錯誤的來源。
const [btns, setBtns] = useState([
<button
onClick={() => setBtns((prev) => [...prev, prev[0]])}
>
Click
</button>
]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453578.html
標籤：javascript 反应 反应钩子