奇怪的问题.把1加到0上没有任何作用

Question

好吧，我甚至不知道如何描述这个问题，但我会尽力的。你可以在底部找到我所有的代码

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

Answer 1

我认为setPoint (point[selected] +1 )正在用数字替换您的状态，而不是更新对象(这是scores的初始状态)。我认为你可能需要做一些事情，比如……

const updatedValue = point[selected] + 1;
setPoint({...point, [selected]: updatedValue})

Answer 2

如果变量是对象，则不能这样更新状态。您应该使用updater函数访问最近的先前状态快照，然后更新变量，并返回新状态。

setPoint(state => {

return { ...state, [selected]: state[selected] + 1 }
})

或

setPoint(state => {

state[selected]++
return state
})

使用updater函数确保您访问最新的状态快照。仅仅使用setPoints({ ...points, [selected]: points[selected] + 1 })}并不能保证访问最近的状态。

Answer 3

更新用于更新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数组移到组件之外。

注意:我已经减少了no。轶事，这样你就可以快速看到投票的效果。

奖金提示:

目前你的随机选择可以选择当前选择的相同的轶事，这意味着点击按钮什么也不会发生，这不是一个很好的用户体验。

查看下面的片段，每次你点击"下一个轶事"按钮，它保证一个新的轶事。

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>