具有默认数组值的 React useState 不会重新渲染

Question

如果我使用数字或字符串作为默认值，它会在使用 setVote 后重新渲染应用程序，就像使用 setSelected 一样。使用数组它不起作用(仅在页面重新渲染后显示真正的更新数组，因为使用 setSelected 按钮很容易检查(

const App = (props) => {
const [votes, setVotes] = useState([0,0,0,0,0,0])
const [selected, setSelected] = useState(0)
const handlenext = () => {
setSelected(Math.floor(Math.random() * 6))
}
const handlevote = () => {
let newvotes=votes
newvotes[selected]+=1
setVotes(newvotes)
}
return (
<div>
<button onClick={handlenext}> next anecdot</button>
<p>{props.anecdotes[selected]}</p>
<button onClick={handlevote}> vote</button>
<p>votes {votes[selected]}</p>
</div>
)
}
const anecdotes = [
'I',
's',
'T',
'A',
'l',
'.'
]

Answer 1

试试这个

const handlevote = () => {
let newvotes= [...votes]
newvotes[selected]+=1
setVotes(newvotes)
}

Answer 2

你需要去构建一个新数组。不要使用旧阵列。你应该常量 a=[...b]

Answer 3

您需要传递一个新的引用。数组和对象是基于引用的，如果你不创建一个新的是相同的引用，反应不要深入比较差异。此外，您直接变异状态，这很糟糕。

从状态创建新副本作为const newvotes= [... votes]。现在，您可以传递下一个状态，而无需更改原始状态并传递新引用