1好的，我什至不知道如何描述這個問題，但我會盡力而為。你可以在底部找到我所有的代碼
const scores = { 0: 0, 1: 0, 2: 0, 3: 0, 4:0, 5:0, 6:0 }
const [point, setPoint] = useState(scores)
所以我將狀態設定為一個陣列，稍后我用一個按鈕呼叫它
<button onClick ={()=> setPoint (point[selected] 1 )}>Vote</button>
<button onClick={()=> setSelected(Math.floor(Math.random()* anecdotes.length ))}>next anecdotes</button>
{scores[selected]}
起初它應該 [selected] 的值是 0，但是每當我按下投票按鈕并添加 1 時，它仍然是 0。我只是想知道是否有人可以幫助解決這個問題。
import { useState } from 'react'
const App = () => {
const anecdotes = [
'If it hurts, do it more often',
'Adding manpower to a late software project makes it later!',
'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
'Premature optimization is the root of all evil.',
'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients'
]
const [selected, setSelected] = useState(0)
const scores = { 0: 0, 1: 0, 2: 0, 3: 0, 4:0, 5:0, 6:0 }
const [point, setPoint] = useState(scores)
return (
console.log (selected),
console.log (point[selected]),
<div>
{anecdotes[selected]}
<br></br>
<button onClick ={()=> setPoint (point[selected] 1 )}>Vote</button>
<button onClick={()=> setSelected(Math.floor(Math.random()* anecdotes.length ))}>next anecdotes</button>
{point[selected]}
</div>
)
}
/*onst Set = (...[points, selected]) => {
points [selected] = 1;
console.log(points [selected]);
<h1>{points}</h1>
}*/
export default App
uj5u.com熱心網友回復：
我認為setPoint (point[selected] 1 )是用數字替換您的狀態，而不是更新物件（這是 的初始狀態scores）。我想你可能需要做類似...
const updatedValue = point[selected] 1;
setPoint({...point, [selected]: updatedValue})
uj5u.com熱心網友回復：
如果變數是物件，則不能像這樣更新狀態。您應該使用 updater 函式訪問最近的先前狀態快照，然后更新變數并回傳新狀態。
setPoint(state => {
return { ...state, [selected]: state[selected] 1 }
})
或者
setPoint(state => {
state[selected]
return state
})
使用更新程式功能可確保您訪問最新的狀態快照。簡單地使用setPoints({ ...points, [selected]: points[selected] 1 })}并不能保證將訪問最近的狀態。
uj5u.com熱心網友回復：
更新points狀態更新邏輯如下圖：
const anecdotes = [
"If it hurts, do it more often",
"Adding manpower to a late software project makes it later!",
"Premature optimization is the root of all evil.",
];
const App = () => {
const [selected, setSelected] = React.useState(0);
const [points, setPoints] = React.useState({ 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0 });
return (
<div>
{anecdotes[selected]}
<br></br>
<button onClick={() => setPoints({ ...points, [selected]: points[selected] 1 })}>
Vote
</button>
<button onClick={() => setSelected(Math.floor(Math.random() * anecdotes.length))}>
Next Anecdote
</button>
{points[selected]}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>此外，不需要單獨的scores變數，您還可以將anecdotes陣列移到組件之外。
注意：我已經減少了編號。軼事，以便您可以快速查看投票作業。
獎金提示：
當前，您的隨機選擇可以選擇與當前選擇的相同的軼事，這意味著單擊按鈕時沒有任何反應，這不是一個很好的用戶體驗。
查看下面的片段，每次單擊“下一個軼事”按鈕時，它都會保證有新的軼事。
顯示代碼片段
const anecdotes = [
"If it hurts, do it more often",
"Adding manpower to a late software project makes it later!",
"Premature optimization is the root of all evil.",
];
const App = () => {
const [selected, setSelected] = React.useState(0);
const [points, setPoints] = React.useState({ 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0 });
const getNextAnecdote = () => {
const choosableIndicies = anecdotes.map((_, i) => i).filter((i) => i !== selected);
setSelected(choosableIndicies[Math.floor(Math.random() * choosableIndicies.length)]);
};
return (
<div>
{anecdotes[selected]}
<br></br>
<button onClick={() => setPoints({ ...points, [selected]: points[selected] 1 })}>
Vote
</button>
<button onClick={getNextAnecdote}>Next Anecdote</button>
{points[selected]}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466109.html
標籤：javascript 反应