如何调用具有参数的同名function

Question

I am new to react. I wanna call a function from other.js file which has the same name with the parameter in the dashboard function. But it shows TypeError: getCurrentProfile is not a function. Any tips and helps are much appreciated in advance!

for example:

import { getCurrentProfile } from '../actions/profile';

const Dashboard = ({
getCurrentProfile,
auth: { user }

}) => {
useEffect(() => {
    getCurrentProfile();
}, []);
return(
    <Fragment>
        <h1> DAshboard</h1>
        <i className='das fa-user'></i><p>Welcome {user && user.name}</p>
    </Fragment>
    );
};

error: TypeError: getCurrentProfile is not a function

Answer 1

You'll need to make it so that there's no name collision. You could rename the import, or rename the destructured prop, or don't destructure the props at all.

Actually, it doesn't look like the getCurrentProfile prop is used at all, so you could just remove it from the parameter list:

const Dashboard = ({
    auth: { user }
}) => {
    useEffect(getCurrentProfile, []);
    return (
        <Fragment>
            <h1> DAshboard</h1>
            <i className='das fa-user'></i><p>Welcome {user && user.name}</p>
        </Fragment>
    );
};

If you actually are using the getCurrentProfile prop somewhere, then you could do

const Dashboard = (props) => {
    const { user } = props.auth;
    useEffect(getCurrentProfile, []);

Answer 2

You can use "as" in your import.

import { getCurrentProfile as Alias } from '../actions/profile';

and than use that Alias name in your hook

useEffect(() => {
    Alias();
}, []);