ReactJS: Quelle est la bonne façon de définir une valeur d'état en tant que tableau?

Question

J'ai un tableau d'objet qui obtient des données d'utilisateurs en utilisant l'API de récupération. J'ai essayé le constructeur, créer une fonction, lier. Ça n'a pas marché. J'ai essayé ComponentDidMount et setState, il renvoie undefined.

class Admin extends Component { 


    componentDidMount() { 

     var that = this; 
     fetch('http://localhost:4500/data/users', { 
      method: 'GET', 
      headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
      } 
     }).then(function(response) { 
      return response.json(); 
     }).then(function(json){ 
      console.log(json); 
      that.state = {users: json}; 
     }); 

    } 

    render() { 

    return (

     <SpicyDatatable 
      tableKey={key} 
      columns={columns} 
      rows={this.state.users} 
      config={customOptions} 
     /> 
     ); 
    } 
} 

Quelle est la bonne façon de définir une valeur d'état en tant que tableau et de le rendre? Merci

Answer 1

d'abord initialiser votre état dans votre constructeur comme celui-ci

constructor(props) { 
     super(props); 
     this.state = {users : []} //initialize as array 
    } 

Ensuite, au lieu de that.state = {users: json}; définir votre état en utilisant

that.setState({ users: json }); 

Answer 2

Vous devez utiliser la méthode React setState().

that.setState({ users: json }); 

Answer 3

Vous avez déjà obtenu la réponse à utiliser setState({ users: json }), qui est juste . Comme alternative à l'initialisation de la valeur de tableau comme abul, vous pouvez également effectuer un rendu conditionnel, en fonction de l'état du composant. Par exemple, vous pouvez rendre un composant différent si les utilisateurs ne sont pas encore chargés.

render() { 
    const users = this.state.users; 
    return !users ? 
     <p>Loading..</p> : 
     <YourComponent users={users} />; 
}