Je suis nouveau sur react.js, voici mon code

import React,{useState} from 'react';
import './App.css';
import Person from './Person/Person'

const App = props =>
{
  const [personState, setPersonState] = useState({
    persons : [
      {name:"Max", age:28},
      {name:"Manu", age:29},
      {name:"Ranjeet", age:25}
    ],
    otherState : 'Some state value'
  }
  );
  console.log(personState);
  const switchNameHandler = () =>{
    setPersonState({
      persons : [
        {name:"Maximillian", age:28},
        {name:"Manu", age:29},
        {name:"Ranjeet", age:24}
      ],
      otherState : personState.otherState
    });

  }
// function App() {

      return (
        <div className="App">
          <h1>React App</h1>
          <p>This is working</p>
          <button onClick={switchNameHandler}>Switch Name</button>
          <Person name={personState.persons[0].name} age={personState.persons[0].age}/>
          <Person name={personState.persons[1].name} age={personState.persons[1].age}>My Hobbies:Racing</Person>
          <Person name={personState.persons[2].name} age={personState.persons[2].age}/>

        </div>
      );


}

export default App;

Ici, je n'ai pas console.log(personState) dans la fonction switchNameHandler, mais cela s'affiche dans la console, lorsque switchNameHandler est appelé, est-ce à cause du crochet useState() ou autre

{persons: Array(3), otherState: "Some state value"}
otherState: "Some state value"
persons: Array(3)
0: {name: "Maximillian", age: 28}
1: {name: "Manu", age: 29}
2: {name: "Ranjeet", age: 24}
length: 3
__proto__: Array(0)
__proto__: Object 
1
Ranjeet 27 janv. 2020 à 11:19

1 réponse

Meilleure réponse

Oui, c'est à cause de useState.

Dans ce code, console.log sera appelé à chaque fois que votre composant App est rendu.

Ce sera au moins une fois lorsque l'ensemble de l'application est rendu ou à chaque fois que l'état de vos composants d'application change. Dans votre exemple, useState a créé un état, et votre gestionnaire de clics modifie cet état, de sorte que le composant App est rendu à nouveau.

2
Dan 27 janv. 2020 à 08:27