ReactJS: страница не перерисовывается при изменении состояния

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

Есть несколько вещей, которые должны быть обновлены здесь.

Во-первых, copyVote - это массив, содержащий количество голосов за каждую цитату. Так что ...copyVote даст вам каждый элемент в этом массиве. Вам нужно только проголосовать за текущую цитату. Ваше начальное состояние vote должно быть

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

Вы также хотите обновить функцию addVote, как указано в DSCH.

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 будет отображаться только голос за текущую выбранную цитату. Вам может потребоваться обновить этот компонент, чтобы справиться с этим.

Answer 2

В setVote(vote = copyVote) выражение в скобках является выражением для установки переменной vote со значением в copyVote. Я предполагаю, что именно поэтому вы используете let в let [vote, setVote] = useState([...copyVote]), так как, вероятно, вы получили ошибку при установке значения const. Поскольку setVote - это то, что вы, вероятно, захотите сделать из useState:

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