У меня есть набор анекдотов и две кнопки. Один - голосовать, а другой - случайным образом выбирать следующие анекдоты. Когда я нажимаю кнопку голосования, число голосов увеличивается. Однако проблема в том, что когда я нажимаю на следующие анекдоты, голосование остается, а не сбрасывается до нулевого числа для нового анекдота.
Я попытался сохранить номера голосов, сначала добавив новый атрибут 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
@Konrad Я хочу, чтобы предыдущие голоса были сохранены для одного анекдота. setVote(0) сбросит голос обратно на ноль, но когда я снова наткнулся на тот же анекдот, голос должен был остаться, и я могу продолжить увеличивать ранее накопленный голос.
@Konrad Как я могу это сделать? пожалуйста помоги



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы должны сбросить голос внутри вашей функции handleClick2
const handleClick2 = () => {
setSelected(Math.floor(Math.random()*anecdotes.length));
setVote(0);
}
Но что, если я хочу, чтобы накопленные ранее голоса были сохранены для одного анекдота? на данный момент, используя приведенный выше код, все будет сброшено до нуля. Когда я снова наткнулся на этот же анекдот, голос должен был остаться и я могу продолжать увеличивать голос
Сначала вам нужен массив голосов:
const [votes, setVotes] = useState(() => Array(anecdotes.length).fill(0));
Затем функция добавления голосов:
const handleVotes = () => {
setVote((votes) =>
votes.map((vote, index) => (index === selected ? vote + 1 : vote))
);
};
И отображать правильные голоса:
{votes[selected]}
Определенно самое чистое решение здесь.
Вы никогда не устанавливаете
voteна0. Почему вы ожидаете, что это будет0снова?