Question

如果我使用数字或字符串作为默认值，则在使用setVotes之后，它会像setSelected一样重新渲染应用程序。使用array时，它不起作用（仅在重新呈现页面后才会显示实际更新的数组，因为使用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

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

Answer 3

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

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

使用默认数组值反应useState不会重新呈现

3 个答案: