導入功能時反應錯誤

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

您需要將createProfile一次導入

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

或將其導出為默認導出

export default createProfile

Answer 2

是的，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 3

import {createProfile} from "../../actions/profileActions";導入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;