function - React 函数未定义

Question

我正在尝试使用从 Google API 导入的数据创建一个 React 组件。我可以看到代码在 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 和 use 操作来完成此操作，但这将作为一个自包含组件工作。

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