Si j'utilise un nombre ou une chaîne comme valeur par défaut, il restitue l'application après l'utilisation de setVotes, tout comme avec setSelected. Avec le tableau, cela ne fonctionne pas (afficherait uniquement le tableau réel renouvelé après le rendu de la page, car il est facile de vérifier avec le bouton 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',
'.'
]
3 Réponses :
essayez plutôt ceci
const handlevote = () => {
let newvotes= [...votes]
newvotes[selected]+=1
setVotes(newvotes)
}
Vous devez créer un nouveau tableau. N'utilisez pas d'anciennes baies. Devriez-vous const a = [… b]
Vous devez passer une nouvelle référence. Les tableaux et les objets sont basés sur des références, si vous n'en créez pas un nouveau, c'est la même référence et ne réagissez pas en profondeur pour comparer les différences. De plus, vous mutez directement l'état, ce qui est mauvais.
Créez une nouvelle copie à partir de l'état const newvotes = [... votes] . Vous pouvez maintenant passer l’état suivant sans modifier l’original ni passer une nouvelle référence.