ReactJs-下载前如何完成onClick-href

Question

I have a simple React button component that when clicked should retrieve and download data on the client browser. The problem I am experiencing is that the download is triggered and the csv file downloaded before the data is passed into the href.

Here is my component:

import { Component } from 'react';
import { connect } from 'react-redux';
import { PropTypes } from 'prop-types';
import { ManageUsersSelectors } from 'selectors/Users';
import { BatchRoleActions } from 'actions/Users';

 class UsersExportButton extends Component {
  constructor() {
    super();
    this.state = {
      users: ''
    };
  }

  getUsers(){
    const { userIds } = this.props;
    BatchRoleActions.getAllRoleUsers(userIds)
    .then((users) => {
      this.setState({ users: users});
      return  this.state.users;
    });
  }

  render() {
    return (
      <div className="roles-export-button">
        <a className="button button-default" href={this.state.users} download={'roles.csv'} onClick={() => this.getUsers()} return true>Export Csv</a>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const userIds = ManageUsersSelectors.batchUserIdsSelector(state);
  return {
    userIds: userIds
  };
}

UsersExportButton.propTypes = {
   text: PropTypes.string.isRequired,
   data: PropTypes.array
};

export default connect(mapStateToProps)(UsersExportButton);

How can I get the getUsers()/onClick function to complete the data retrieval step before downloading?

When i debug my code I can see that the getUsers function returns data - however after the download is triggered

Answer 1

Make sure to bind this to your functions. In your constructor you can do:

 constructor() {
    super();
    this.state = {
      users: ''
    };

    this.getUsers = this.getUsers.bind(this);
  }

or you can use the bind this function:

  getUsers = () => {
    const { userIds } = this.props;
    BatchRoleActions.getAllRoleUsers(userIds)
    .then((users) => {
      this.setState({ users: users});
      return  this.state.users; // This should be removed, you can use this.state.users throughout this component.
    });
  }

Answer 2

Why not get the user data in the componentDidMount lifecycle method? It doesn't look like it needs to be called onClick.

{
  // ...
  componentDidMount() {
    this.getUsers();
  }
  // ...
  render() {
    return (
      <div className="roles-export-button">
        <a className="button button-default" href={this.state.users} download={'roles.csv'}>Export Csv</a>
      </div>
    )
  }
}

Answer 3

How about handling the default "link" behaviour manually to get more control? Also you should probably try to access state after setState has been executed via its callback.

eg

getUsers(cb){
  const { userIds } = this.props;
  BatchRoleActions.getAllRoleUsers(userIds)
  .then((users) => {
    // note the callback of setState which is invoked
    // when this.state has been set
    this.setState({ users: users }, cb);
  });
}

const handleClick = () => {
  this.getUsers(() => {
    window.open(this.state.whatever)
  })
}

<span onClick={handleClick}>Export Csv</span>