导入函数时react出错

Question

我在这个上遇到编译时错误

import createProfile from "../../actions/profileActions";

错误如下未能编译。

[1]
[1] ./src/components/create-profile/CreateProfile.js
[1] 424:57-70 "export 'default' (imported as 'createProfile') was not found in '../../actions/profileActions

但是正在导入的函数在profileActions.js 中可用

export const createProfile = (profileData, history) => dispatch => {
axios
.post("/api/profile", profileData)
.then(res => history.push("/dashboard"))
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};

Answer 1

是第一次学习React的人所犯的错误。

要使用在其他文件中定义的函数，

1.从定义的文件中导出函数。2.在新文件中导入函数。

这可以通过两种方式来实现。

语法1:

export function someFunction(){}
export const constant1="ABC"

如果要导出多个函数/常量，请使用上述语法。

在这种情况下，如果要导入，请遵循以下语法。

import {function1,constant1,...} from <file-name>

语法2:

默认导出对每个文件仅起一个作用。即，您不能以默认方式导出两个函数/常量

export default function1=()=>{}//okay!!
export default function1=()=>{};
export default const someconstant;//ERROR !!

你现在可以这样导入了。

import function1 from <file-name>

Answer 2

您需要导入createProfile或单个导入

import {createProfile} from "../../actions/profileActions";

或将其导出为默认导出

export default createProfile

Answer 3

导入createProfile为import {createProfile} from "../../actions/profileActions";其他方式导出为

const createProfile = (profileData, history) => dispatch => {
axios
.post("/api/profile", profileData)
.then(res => history.push("/dashboard"))
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
export default createProfile;