具有默认数组值的useState不会重新呈现

Posted 2021-04-30

如果我使用数字或字符串作为默认值，则在使用setVotes之后，它会像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',
  '.'
]

答案

尝试此方法

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

另一答案

您需要构建一个新数组。不要使用旧的数组。您应该const a = […b]

另一答案

您需要传递新的参考。数组和对象是基于引用的，如果您不创建一个新的引用和引用，则不要深入比较差异。此外，您直接在更改状态是不好的。

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