兩種功能有什么區別？

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中的返回值，但是undMembership中的console.log（id）沒有返回值。

Answer 1

異步等待模式在您的示例中不一致地應用。

基本上，您的想法是可以編寫隨后的代碼，例如同步代碼：

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調用的返回值。