Je suis juste apprenant à réagir, Ici, j'ai défini la valeur initiale et onclick Je veux modifier la valeur, mais rien ne se passe, réagir, réagir ne réagit pas l'écran, aucune modification de valeur.
const app = () => {
const [person, setPerson] = useState([
{name:'sugumar',age:23},
{name:'vijay',age:25}
]
)
const changeNameHandler = () => {
console.log('change name called');
setPerson((person)=>{
console.log('set property called');
person[0].name = 'Arun';
return person;
})
}
return (
<div className='App'>
<button onClick={changeNameHandler}>Change Name</button>
<Person name={person[0].name} age={person[0].age}></Person>
<Person name={person[1].name} age={person[1].age}></Person>
</div>
)
}
export default app;
3 Réponses :
Créez une deuxième copie du tableau avant de la modifier ... Pour ce que ça vaut la peine ... Je ne pense pas que la liaison d'un formulaire à un seul élément dans un tableau est Un bon choix pour la mise à jour de l'état ... Mais c'est ce que vous avez demandé. .. Et vous n'avez pas besoin de retourner la valeur du gestionnaire d'événements.
Essayez ceci Je pense que vous êtes manquant ce qui est indiqué ici
personne [0] nom code> Référencera la matrice créée à partir d'initialisation de l'état. Changer son identifiant ne vous aidera pas non plus. Vous devez cloner la matrice pour empêcher la mutation. Vous pouvez en lire plus sur la programmation fonctionnelle et les objets immuables const changeNameHandler = () => {
let newPerson = [...person];
newPerson[0].name = "Arun";
setPerson(newPerson);
};
Imo, la meilleure option est lodash.com/docs/4.17.15#Clonedeep pour clonage profond
Comme d'autres l'ont noté, vous pouvez utiliser l'opérateur ES6 Spread pour cloner des contenus de tableau / objet dans un nouvel objet: développeur.mozilla.org/en-us/docs/web/javascript/reference/...
@Sozettstasho OUI ne peut faire json.stringify ainsi que parse retour, quel que soit fonctionne pour vous
Utilisez l'opérateur de répression
Pouvez-vous poster la sortie de la console?
@Kyle DePace Aucune erreur Nothing imprimée Sauf que les messages de journal de la console.
Vous allez Codesandbox.io/s/smoosh-night- 0yu5o? File = / src / app.js @sugumarvenkatesan