javascript - 这两个函数有什么区别？

Question

app.js

import React from 'react';
import ClubDetail from './ClubDetail';

class ClubList extends React.Component {

    changeJSX() {
        return this.props.clubs.map((club) => {
            return (
                <div key={club.usid}>
                    <ClubDetail 
                        clubName={club.name} 
                        />
                    <button 
                        className="ui teal basic button"
                        onClick={(event) => this.props.findClub(event, 
                        club.name)}>
                    View</button>
                    <button 
                        className="ui violet basic button"
                        onClick={(event) => 
                        this.props.findMembership(event, club.name)}>
                    Membership</button>
                </div>
            );
        })
    }

    render() {
        return (
            <div className="ui secondary vertical pointing menu">
                {this.changeJSX()}
            </div>
         );

    }
};

export default ClubList;

这是我的 app.js 文件。我想在这里使用 findClub 函数和 findMember 函数。以上功能存在于父组件中。

<小时/>

import axios from ('axios');
...
    findClub = async (event, id) => {
        console.log(id);
        const findClub = await axios.get('/club/club/', {
            params: {
                name : id
            }
        }).then(response => {
            let club = response.data.findclub;
            this.setState({clubName: club.name , clubIntro: club.intro, 
            seleted: 'create'});
        });
    }

    findMembership = async (event, id) => {
        console.log(id);
        const findMembership = await 
        axios.get('/clubMembership/clubMembership', {
            params: {
                name : id
            }
        }).then(response => {
            console.log('findMembership is here')
        })
    }
    ...

上面两个函数中，console.log(id); findClub中的console.log(id)有返回值，而undMembership中的console.log(id)没有返回值。

Answer 1

在您的示例中，异步等待模式的应用不一致。

基本上，这个想法是您可以像同步代码一样编写这些 then 链:

const response = await axios.get('/club/club/', {
    params: {
        name : id
    }
});

let club = response.data.findclub;
this.setState({clubName: club.name , clubIntro: club.intro, seleted: 'create'});

在这种情况下，您将使用await 调用的返回值。