Dispatch 不是一个函数 react

美国能源部

我正在使用 react 和 redux 开发一个应用程序。我使用api。

申请流程:

  • 填表格,
  • 点击发送按钮,
  • 将数据从表单发送到 api,
  • 转到食谱页面

第一个组成部分是您输入信息的表格(姓名、卡路里、饮食类型)。

    class FormPage extends Component {
      constructor(props) {
        super(props);

        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.goToListOfMealPage = this.goToListOfMealPage.bind(this);
      }

      handleFormSubmit(data) {
        const name = data.name;
        const calories = data.caloreis;
        const diet = data.diet;
        const health = data.health;

        console.log(name)
        return loadData( name, calories, diet, health)()
          .then(({ error }) => {
            if (!error) {
              setTimeout(this.goToListOfMealPage, 1500);
            }

            return error;
          }
        );
      }

      goToListOfMealPage() {
        const { history } = this.props;
        history.push('/ListMeal');
      }

      render() {
        return (
          <Form onSubmit={this.handleFormSubmit}/>
        );
      }
    }

const mapDispatchToProps = (dispatch) => {
  return {
    loadData: () => dispatch(loadData())
  }
};

FormPage = connect(mapDispatchToProps)(FormPage)
export default FormPage;

handleFromSubmit功能是将表单数据发送到api链接(https://api.edamam.com/search?q= ${name}n&app_id=${key.id}&app_key=${key.key}&calories=${calories }&health=${health}&diet=${diet})。

填写表格并单击发送按钮后,我想在新的子页面上有一份膳食(食谱)列表。

这里loadData

const fetchDataStart = () => ({
  type: actionTypes.FETCH_DATA_START,
});

const fetchDataSucces = (data) => ({
  type: actionTypes.FETCH_DATA_SUCCESS,
  data,
});

const fetchDataFail = () => ({
  type: actionTypes.FETCH_DATA_FAIL,
});

const loadData = (name, calories, diet, health) => (dispatch) => {
  dispatch(fetchDataStart());
  return axios.get(`https://api.edamam.com/search?q=${name}n&app_id=${key.id}&app_key=${key.key}&calories=${calories}&health=${health}&diet=${diet}`)
    .then(({ data }) => console.log(data) || dispatch(fetchDataSucces(data)))
    .catch((err) => dispatch(fetchDataFail(err.response.data)));
};

发送表格后,我收到一个错误 TypeError: dispatch is not a function

在此处输入图片说明

我找不到这个错误的原因

布赖恩·勒

您的代码存在一些问题:

  • 如果您已将调度映射到道具,则可以通过执行以下操作来调用操作 this.props.loadData(params)
  • 你不应该通过这样做来调用动作,loadData()()因为分派的动作不返回一个函数(尽管原始动作返回一个函数,但不要让它欺骗你)。

因此,要使用loadData()action,您需要将其映射到 props,如下所示:

const mapDispatchToProps = dispatch => ({
  loadData: (name, calories, diet, health) => dispatch(loadData(name, calories, diet, health)),
});

然后像这样使用它:

componentDidMount() {
  this.props.loadData(name, calories, diet, health)
    .then(() => console.log('Success'))
    .catch(err => throw new Error("Error", err.stack))
}

编辑:根据您新编辑的问题,redux 中的 connect 函数分别接受mapStateToPropsmapDispatchToProps,因此在您的代码中它应该是:

export default connect(null, mapDispatchToProps)(Component)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React-Redux-Dispatch Action Error,this.props.mostrarProduto不是一个函数

来自分类Dev

Dispatch()调用一个函数,但是.then()在React-Redux上不起作用

来自分类Dev

this.props.dispatch 不是 react js 组件文件中的函数

来自分类Dev

dispatch: debounce 需要一个函数

来自分类Dev

React Native-React.createElement不是一个函数

来自分类Dev

React.js-operationStore.getItems不是一个函数

来自分类Dev

TypeError:React.renderToStaticMarkup不是一个函数

来自分类Dev

react-navigation:useFocusEffect不是一个函数

来自分类Dev

TypeError:(0,_react.useEffect)不是一个函数

来自分类Dev

React Redux-> TypeError:对象(...)不是一个函数

来自分类Dev

React Native Context setUser不是一个函数

来自分类Dev

TypeError:React.renderToStaticMarkup不是一个函数

来自分类Dev

this.setState 不是一个函数 React

来自分类Dev

this.props 不是一个函数 react.js

来自分类Dev

dispatch 不是函数,异步

来自分类Dev

react-chartjs返回一个类型错误:(中间值)[chartType]不是一个函数

来自分类Dev

React Native-this.updateTimeState不是一个函数。试图在另一个方法中引用类方法?

来自分类Dev

在React中,为什么我必须绑定一个onClick函数而不是调用它?

来自分类Dev

“ TypeError:对象(...)不是一个函数” react-redux-firebase

来自分类Dev

TypeError:JSON.stringify(...)。then不是一个函数-React JS

来自分类Dev

在React Native 0.61上链接API:openUrl不是一个函数

来自分类Dev

TypeError:this.state.rates.map不是一个函数-React.js

来自分类Dev

从React中的函数返回一个字符串而不是html

来自分类Dev

(0,_helperModuleTransforms.getModuleName)不是一个函数-React Native

来自分类Dev

React-Navigation:无法模拟StackActions.pop,因为它不是一个函数

来自分类Dev

TypeError:data.Order.map不是一个函数(react和graphql)

来自分类Dev

React:TypeError:this.props.users.map不是一个函数

来自分类Dev

React Navigation header onPress-this.setState不是一个函数

来自分类Dev

React + ES6:Dash.js,MediaPlayer不是一个函数

Related 相关文章

  1. 1

    React-Redux-Dispatch Action Error,this.props.mostrarProduto不是一个函数

  2. 2

    Dispatch()调用一个函数,但是.then()在React-Redux上不起作用

  3. 3

    this.props.dispatch 不是 react js 组件文件中的函数

  4. 4

    dispatch: debounce 需要一个函数

  5. 5

    React Native-React.createElement不是一个函数

  6. 6

    React.js-operationStore.getItems不是一个函数

  7. 7

    TypeError:React.renderToStaticMarkup不是一个函数

  8. 8

    react-navigation:useFocusEffect不是一个函数

  9. 9

    TypeError:(0,_react.useEffect)不是一个函数

  10. 10

    React Redux-> TypeError:对象(...)不是一个函数

  11. 11

    React Native Context setUser不是一个函数

  12. 12

    TypeError:React.renderToStaticMarkup不是一个函数

  13. 13

    this.setState 不是一个函数 React

  14. 14

    this.props 不是一个函数 react.js

  15. 15

    dispatch 不是函数,异步

  16. 16

    react-chartjs返回一个类型错误:(中间值)[chartType]不是一个函数

  17. 17

    React Native-this.updateTimeState不是一个函数。试图在另一个方法中引用类方法?

  18. 18

    在React中,为什么我必须绑定一个onClick函数而不是调用它?

  19. 19

    “ TypeError:对象(...)不是一个函数” react-redux-firebase

  20. 20

    TypeError:JSON.stringify(...)。then不是一个函数-React JS

  21. 21

    在React Native 0.61上链接API:openUrl不是一个函数

  22. 22

    TypeError:this.state.rates.map不是一个函数-React.js

  23. 23

    从React中的函数返回一个字符串而不是html

  24. 24

    (0,_helperModuleTransforms.getModuleName)不是一个函数-React Native

  25. 25

    React-Navigation:无法模拟StackActions.pop,因为它不是一个函数

  26. 26

    TypeError:data.Order.map不是一个函数(react和graphql)

  27. 27

    React:TypeError:this.props.users.map不是一个函数

  28. 28

    React Navigation header onPress-this.setState不是一个函数

  29. 29

    React + ES6:Dash.js,MediaPlayer不是一个函数

热门标签

归档