La fonction de réaction n'est pas définie

Question

J'essaie de créer un composant de réaction avec des données importées de l'API Google. Je peux voir que le code fonctionne dans le fichier console.log mais quand j'essaie d'utiliser ce code dans la méthode React render, je ne reçois rien. Quand je déplace ma fonction à l'intérieur de la classe, elle apparaît comme la fonction non définie. Je ne peux pas comprendre pourquoi?

function handleTouchTap() { 
 
    console.log('CHIP selected'); 
 
    authorize(); 
 
} 
 

 
function handleAccounts(response) { 
 
    console.log(response.result.username); 
 
    var username = response.result.username 
 
    console.log(username); 
 
} 
 

 
function authorize(event) { 
 
    var useImmidiate = event ? false : true; 
 
    var authData = { 
 
    client_id: CLIENT_ID, 
 
    scope: SCOPES, 
 
    immidiate: useImmidiate 
 
    }; 
 
    gapi.auth.authorize(authData, function (response) { 
 
    gapi.client.load('analytics', 'v3').then(function() { 
 
     console.log(response); 
 
     gapi.client.analytics.management.accounts.list().then(handleAccounts); 
 
    }); 
 
    }); 
 
} 
 

 
class Chips extends React.Component { 
 
    render() { 
 
    return (
 
     <div style={styles.wrapper}> 
 
     <Chip 
 
      onTouchTap={handleTouchTap} 
 
      style={styles.chip} > 
 
      <Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} /> 
 
      Login 
 
     </Chip> 
 
     <Chip 
 
      style={styles.chip} > 
 
      <Avatar icon={<FontIcon className="material-icons">account_circle</FontIcon>} /> 
 
      {this.username} 
 
     </Chip> 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 1

Dans la plupart des cas, lorsque vous voulez rendre quelque chose qui pourrait changer, vous voulez ajouter à l'état. De cette façon, lorsque vous appelez setState, le composant sait qu'il doit rediffuser et afficher les modifications.

Ici j'ai ajouté les fonctions comme méthodes de composant, de sorte que vous pouvez appeler this.setState sur le résultat. Idéalement, vous le feriez probablement avec des actions redux et use, mais cela fonctionnera comme un composant autonome.

class Chips extends React.Component { 
    handleTouchTap =() => { 
    console.log('CHIP selected'); 
    this.authorize(); 
    } 

    handleAccounts = (response) => { 
    var username = response.result.username; 
    this.setState({ 
     username 
    }); 
    } 

    authorize = (event) => { 
    var useImmidiate = event ? false : true; 
    var authData = { 
     client_id: CLIENT_ID, 
     scope: SCOPES, 
     immidiate: useImmidiate 
    }; 
    gapi.auth.authorize(authData, (response) => { 
     gapi.client.load('analytics', 'v3').then(() => { 
     console.log(response); 
     gapi.client.analytics.management.accounts.list() 
      .then(this.handleAccounts); 
     }); 
    }); 
    } 

    render() { 
    return (
     <div style={styles.wrapper}> 
     <Chip 
      onTouchTap={this.handleTouchTap} 
      style={styles.chip}> 
      <Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} /> 
      Login 
     </Chip> 
     <Chip 
      style={styles.chip} > 
      <Avatar icon={<FontIcon className="material-icons">account_circle</FontIcon>} /> 
      {this.state.username} 
     </Chip> 
     </div> 
    ); 
    } 
}