Question

我正在尝试使用Google API中的导入数据创建反应组件。我可以看到代码在console.log中工作但是当我尝试在React渲染方法中使用该代码时，我没有得到任何东西。当我在类中移动我的函数时，它会作为未定义的函数出现。我不明白为什么？

＆＃13;

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

＆＃13;

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

没有定义React函数

1 个答案: