使用默认数组值反应 useState 不会重新渲染答案

【问题标题】：React useState with default array value does not rerender使用默认数组值反应 useState 不会重新渲染
【发布时间】：2020-10-04 06:17:54
【问题描述】：

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

【问题讨论】：

标签： reactjs react-hooks use-state rerender

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：