反応関数が定義されていません

Question

Google APIからインポートされたデータで反応コンポーネントを作成しようとしています。私は、コードがconsole.logで動作しているのを見ることができますが、Reactレンダリングメソッドでそのコードを使用しようとすると、何も得られません。クラス内で関数を移動すると、定義されていない関数として呼び出されます。なぜ私は理解できないのですか？多くの場合

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

あなたが変更される可能性があります何かをレンダリングするとき、あなたは状態にそれを追加します。このようにしてsetStateを呼び出すと、コンポーネントは再レンダリングして変更を表示する必要があることを認識します。

ここでは、コンポーネントメソッドとして関数を追加したので、結果にthis.setStateを呼び出すことができます。理想的には、あなたはおそらくreduxでこれを行い、アクションを使用しますが、これは自己完結型コンポーネントとして機能します。

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> 
    ); 
    } 
}