每次我點擊某個玩家的“增加”或“減少”按鈕時，我只希望該玩家的分數增加。但是，現在當我單擊其中一個按鈕時，它會增加兩個分數。我知道這可能是我完全忽略的簡單事情，但感謝任何幫助。先感謝您！這是我的代碼https://codesandbox.io/s/objective-curran-6ogn3?file=/src/App.js:0-2090：
import "./styles.css";
import {Component, useState} from 'react';
export default function App() {
const [count, setCount] = useState(0);
const [playerScore, setplayerScore] = useState([{
nameOne: 'Player 1'
}, {
nameTwo: 'Player 2'
}
]);
const increase = () => {
setCount(count 1);
setplayerScore(playerScore);
};
const decrease = () => {
setCount(count - 1);
setplayerScore(playerScore);
};
return (
<main>
{/* player 1*/}
<div>
{playerScore.map((player) => {
return (
<div>
<h2 className="name">{player.nameOne}</h2>
</div>
);
})}
</div>
<div>
<div className="score">{count}</div>
{/* increase button */}
<button onClick={increase}>
Increase
</button>
{/* decrease button */}
<button onClick={decrease}>
Decrease
</button>
</div>
{/* player 2 */}
<div>
{playerScore.map((player) => {
return (
<div>
<h2 className="name">{player.nameTwo}</h2>
</div>
);
})}
</div>
<div>
<div className="score">{count}</div>
<section>
<button onClick={increase}>Increase</button>
<button onClick={decrease}>Decrease</button>
</section>
</div>
</main>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
uj5u.com熱心網友回復：
我根據你的代碼做了這個 fork。https://codesandbox.io/s/cranky-hooks-q9ntu?file=/src/App.js
我重構了一些邏輯并添加了我理解你想要的功能。特別是增加/減少邏輯。
主要錯誤是您對整個陣列使用相同的狀態，因此所有專案的值將始終相同。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330672.html
標籤：javascript 反应 按钮