Question

我正在通过赫尔辛基大学的全栈开放课程来学习反应。代码的重点是页面上显示了两个按钮和一个引号。一个按钮进入随机报价，另一个按钮让您进行投票，并显示该报价总计有多少票。问题是，当我单击“投票”时，它将在后台添加投票，但除非更改引号，否则不会重新呈现投票总数。

我尝试了各种方式来进行状态更改，例如专门为setVote创建一个函数，但我无法使其正常工作。

const App = () => {
  const [selected, setSelected] = useState(0)
  let [vote, setVote] = useState([...copyVote])

  const changeAnecdote = () => {
    setSelected(Math.floor(Math.random() * 6))
  }

  const addVote = () => {
    copyVote[selected] = copyVote[selected] + 1
    setVote(vote = copyVote)
  }

  return (
    <div>
        <Button onClick={changeAnecdote} text='Next Anecdote'/>
        <Button onClick={addVote} text='Vote'/>
        <div>
          {anecdotes[selected]}
          <DisplayVotes vote={vote} selected={selected}/>
        </div>
    </div>
  )
}

copyVote是零填充数组的副本，DisplayVotes只是在屏幕上显示该报价的总票数。

当通过开发人员工具投票后，我检查投票数组中的更改时，直到我引用另一个引号，该数组才会更改。有人对我在做什么错有任何想法吗？

Answer 1

在setVote(vote = copyVote)中，括号内的表达式是用vote中的值设置copyVote变量的表达式。我认为这就是为什么在let中使用let [vote, setVote] = useState([...copyVote])的原因，因为可能在将值设置为const时出错。由于setVote是useState的回报，因此您可能想要做的是：

const addVote = () => {
    copyVote[selected] = copyVote[selected] + 1
    setVote(copyVote[selected])
}

Answer 2

有些事情应该在这里进行更新。

首先，copyVote是一个包含每个引用的投票数的数组。因此...copyVote将为您提供该数组中的每个项目。您只希望对当前报价进行投票。您的初始vote状态应为

const [vote, setVote] = useState(copyVote[selected])

您还希望按照上述DSCH的方式更新addVote函数。

const addVote = () => {
  // copyVote[selected]++ is the same as copyVote[selected] += 1 and copyVote[selected] = copyVote[selected] + 1 
  setVote(copyVote[selected]++)
}

最后，您想添加一种在每次更改轶事时更新投票的方法。您可以在changeAnecdote函数中执行此操作，但是更好的方法是使用依赖于selected状态的效果挂钩。

useEffect(() => {
  // Set the value of vote to match the newly selected quote
  setVote(copyVote[selected])
}, [selected])

使用DisplayVotes vote道具只会显示当前选定报价的投票。您可能需要更新该组件以处理此问题。

ReactJS：页面不会在状态更改时重新呈现

2 个答案: