Как я могу сохранить накопленное значение (целое число) в React?

У меня есть набор анекдотов и две кнопки. Один - голосовать, а другой - случайным образом выбирать следующие анекдоты. Когда я нажимаю кнопку голосования, число голосов увеличивается. Однако проблема в том, что когда я нажимаю на следующие анекдоты, голосование остается, а не сбрасывается до нулевого числа для нового анекдота.

Я попытался сохранить номера голосов, сначала добавив новый атрибут Vote с пустым значением "" в массив анекдотов, anecdotes.forEach(function (anecdote) { anecdote.Vote = "" }); а затем помещать увеличивающиеся числа голосов в новую копию массива const copyAnecdotes = [...anecdotes], но это не сработало. Как я могу заставить это работать?

App.js

import { useState } from 'react'

const inlineParagraph = {
  display: 'inline-flex',
  flexDirection: 'column',
}

const inlineButton = {
  display: 'flex',
  marginTop: '5px',
  gap: '10px',
}

const Button = (props) => {
  return (
    <div>
      <button onClick = {props.handleClick}> {props.text} </button>
    </div>
  )
}

const App = () => {

  const handleClick2 = () => {
    setSelected(Math.floor(Math.random()*anecdotes.length))
  }

  const handleVote = () => {
    setVote(vote + 1) 
  }

  const anecdotes = [
    'If it hurts, do it more often.',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.info is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients.',
    'The only way to go fast, is to go well.'
  ]
   
  const [selected, setSelected] = useState(0)
  const [vote, setVote] = useState(0)

  const copyAnecdotes = [...anecdotes]

  return (
    <div style = {inlineParagraph}>
      { anecdotes[selected] }


      <div style = {inlineButton} >
        <Button handleClick = {handleClick2} text = "next anecdotes" setSelected = {setSelected} />
        <Button handleClick = {handleVote} text = "vote" setSelected = {setSelected} /> {vote}
      </div>
    </div>
  )
}

export default App

Вы никогда не устанавливаете vote на 0. Почему вы ожидаете, что это будет 0 снова?

Konrad 10.02.2023 16:07

@Konrad Я хочу, чтобы предыдущие голоса были сохранены для одного анекдота. setVote(0) сбросит голос обратно на ноль, но когда я снова наткнулся на тот же анекдот, голос должен был остаться, и я могу продолжить увеличивать ранее накопленный голос.

Jabri Juhinin 10.02.2023 16:14

@Konrad Как я могу это сделать? пожалуйста помоги

Jabri Juhinin 10.02.2023 16:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
62
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны сбросить голос внутри вашей функции handleClick2

const handleClick2 = () => {
    setSelected(Math.floor(Math.random()*anecdotes.length));
    setVote(0); 
}

Но что, если я хочу, чтобы накопленные ранее голоса были сохранены для одного анекдота? на данный момент, используя приведенный выше код, все будет сброшено до нуля. Когда я снова наткнулся на этот же анекдот, голос должен был остаться и я могу продолжать увеличивать голос

Jabri Juhinin 10.02.2023 16:12
Ответ принят как подходящий

Сначала вам нужен массив голосов:

const [votes, setVotes] = useState(() => Array(anecdotes.length).fill(0));

Затем функция добавления голосов:

const handleVotes = () => {
  setVote((votes) =>
    votes.map((vote, index) => (index === selected ? vote + 1 : vote))
  );
};

И отображать правильные голоса:

{votes[selected]}

Определенно самое чистое решение здесь.

Wesley LeMahieu 10.02.2023 16:48

Другие вопросы по теме