ReactJS 中的导出问题

Question

您好，我学习 React 和 Redux 已经 2 周了错误

./src/Components/MainComponent.js Attempted import error: 'postFeedback' is not exported from '../redux/ActionCreators'.

***这是我的 ActionCreators.js 文件

import * as ActionTypes from './ActionTypes';
import {baseUrl} from '../shared/baseUrl';


export const addComment = (comment) => ({
  type: ActionTypes.ADD_COMMENT,
  payload: comment
});

//////
export const postComment = (dishId, rating, author, comment) => (dispatch) => {

  const newComment = {
      dishId: dishId,
      rating: rating,
      author: author,
      comment: comment
  };
  newComment.date = new Date().toISOString();

  return fetch(baseUrl + 'comments', {
      method: "POST",
      body: JSON.stringify(newComment),
      headers: {
        "Content-Type": "application/json"
      },
      credentials: "same-origin"
  })
  .then(response => {
      if (response.ok) {
        return response;
      } else {
        var error = new Error('Error ' + response.status + ': ' + response.statusText);
        error.response = response;
        throw error;
      }
    },
    error => {
          throw error;
    })
  .then(response => response.json())
  .then(response => dispatch(addComment(response)))
  .catch(error =>  { console.log('post comments', error.message); alert('Your comment could not be posted\nError: '+error.message); });
};

///FEEDBACK



export const postFeedback = (feedback) => (dispatch) => {
  const newFeedback = Object.assign({ date: new Date().toISOString() }, feedback);

  return fetch(baseUrl + 'feedback', {
      method: 'POST',
      body: JSON.stringify(newFeedback),
      headers: {
          'Content-Type': 'application/json'
      },
      credentials: 'same-origin'
  })
      .then(response => {
          if (response.ok) {
              return response;
          } else {
              var error = new Error('Error ' + response.status + ': ' + response.statusText);
              error.response = response;

              throw error;
          }
      },
          error => {
              var errorMessage = new Error(error.errorMessage);
              throw errorMessage;
          }
      )
      .then(response => response.json())
      .then(response => dispatch(addComment(response)))
      .catch(error => {
          console.log('Post feedback: ' + error.message);
          alert('Feedback could not be posted:\n' + error.message)
      })
};

//////
export const fetchDishes = () => (dispatch) => {
    dispatch(dishesLoading(true));

    return fetch(baseUrl + 'dishes')
    .then(response => {
        if (response.ok) {
          return response;
        } else {
          var error = new Error('Error ' + response.status + ': ' + response.statusText);
          error.response = response;
          throw error;
        }
      },
      error => {
            var errmess = new Error(error.message);
            throw errmess;
      })
    .then(response => response.json())
    .then(dishes => dispatch(addDishes(dishes)))
    .catch(error => dispatch(dishesFailed(error.message)));
}


export const fetchComments = () => (dispatch) => {    
    return fetch(baseUrl + 'comments')
    .then(response => {
        if (response.ok) {
          return response;
        } else {
          var error = new Error('Error ' + response.status + ': ' + response.statusText);
          error.response = response;
          throw error;
        }
      },
      error => {
            var errmess = new Error(error.message);
            throw errmess;
      })
    .then(response => response.json())
    .then(comments => dispatch(addComments(comments)))
    .catch(error => dispatch(commentsFailed(error.message)));
};

export const fetchPromos = () => (dispatch) => {    
    dispatch(promosLoading());

    return fetch(baseUrl + 'promotions')
    .then(response => {
        if (response.ok) {
          return response;
        } else {
          var error = new Error('Error ' + response.status + ': ' + response.statusText);
          error.response = response;
          throw error;
        }
      },
      error => {
            var errmess = new Error(error.message);
            throw errmess;
      })
    .then(response => response.json())
    .then(promos => dispatch(addPromos(promos)))
    .catch(error => dispatch(promosFailed(error.message)));
}
///***Assignment4 where we used all the three actions in this thunk to make effective use of them and also to make the fetch available


export const fetchLeaders = () => (dispatch) => {    
  dispatch(leadersLoading());

  return fetch(baseUrl + 'leaders')
  .then(response => {
      if (response.ok) {
        return response;
      } else {
        var error = new Error('Error ' + response.status + ': ' + response.statusText);
        error.response = response;
        throw error;
      }
    },
    error => {
          var errmess = new Error(error.message);
          throw errmess;
    })
  .then(response => response.json())
  .then(promos => dispatch(addLeaders(promos)))
  .catch(error => dispatch(leadersFailed(error.message)));
}



export const commentsFailed = (errmess) => ({
    type: ActionTypes.COMMENTS_FAILED,
    payload: errmess
});

export const addComments = (comments) => ({
    type: ActionTypes.ADD_COMMENTS,
    payload: comments
});

export const dishesFailed = (errmess) => ({
    type: ActionTypes.DISHES_FAILED,
    payload: errmess
});

export const promosLoading = () => ({
    type: ActionTypes.PROMOS_LOADING
});

export const promosFailed = (errmess) => ({
    type: ActionTypes.PROMOS_FAILED,
    payload: errmess
});

export const addPromos = (promos) => ({
    type: ActionTypes.ADD_PROMOS,
    payload: promos
});

export const addDishes = (dishes) => ({
    type: ActionTypes.ADD_DISHES,
    payload: dishes
});

export const dishesLoading = () => ({
    type:ActionTypes.DISHES_LOADING
 });

/////***Assignement4
//basically we created the actions here now to make them be used using thunk
 export const addLeaders = (leaders) => ({
  type: ActionTypes.ADD_LEADERS,
  payload: leaders
});
///
export const leadersLoading = () => ({
  type: ActionTypes.LEADERS_LOADING,
});

export const leadersFailed = (errmess) => ({
  type: ActionTypes.LEADERS_FAILED,
  payload: errmess
});



//ADDED THREE NEW ACTIONS NOW TO FETCH THUNK THEM

***这是我的 MainComponent.js 文件

import { postComment, fetchDishes, fetchComments, fetchPromos ,fetchLeaders ,postFeedback} from '../redux/ActionCreators';

const mapDispatchToProps = dispatch => ({     
  postFeedback: (firstname, lastname, telnum, email, agree, contactType, message) => 
  dispatch(postFeedback(firstname, lastname, telnum, email, agree, contactType, message))

  });

Answer 1

我建议像这样更新mapDispatchToProps：

const mapDispatchToProps = dispatch => {
  return {
    postFeedback: () => dispatch(postFeedback),
  }
}

然后像这样在你的组件中调用它：

this.props.postFeedback(firstname, lastname, ...other args)