如何在 setState 回调中调用 redux 操作？答案

【问题标题】：How can I call a redux action within a setState callback?如何在 setState 回调中调用 redux 操作？
【发布时间】：2019-08-31 14:23:51
【问题描述】：

我正在尝试从 setState 回调中调用从另一个文件导入的操作，但我收到一个类型错误，说明它不是函数。

我尝试将函数调用移到回调之外，但得到了同样的错误，所以我不确定问题出在哪里。（虽然我认为有些东西没有正确绑定？）

这是调用动作的代码

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { MDBContainer } from "mdbreact";
import FormBuilder from "./FormBuilder";
import { addForm } from "../actions/formActions";

export class FormBuilderContainer extends Component {
  state = {
    name: "",
    formData: []
  };

  onSubmit = (nameArg, formArg) => {
    this.setState(
      {
        name: nameArg.value,
        formData: formArg
      },
      () => {
        const newForm = {
          name: this.state.name,
          formData: this.state.formData
        };

        // Add form via addForm action
        this.props.addForm(newForm);
      }
    );
  };

  render() {
    return (
      <MDBContainer>
        <FormBuilder formData={this.state.formData} onSubmit={this.onSubmit} />
      </MDBContainer>
    );
  }
}

export default connect(
  null,
  { addForm }
)(FormBuilderContainer);

还有addForm动作方法

export const addForm = form => (dispatch, getState) => {
  axios
    .post("/api/forms", form, tokenConfig(getState))
    .then(res =>
      dispatch({
        type: ADD_FORM,
        payload: res.data
      })
    )
    .catch(err =>
      dispatch(returnErrors(err.response.data, err.response.status))
    );
  console.log("Saved Form");
};

抛出的错误是：

TypeError: _this.props.addForm 不是函数

  30 |                console.log(newForm);
  31 | 
  32 |                // Add form via addForm action
> 33 |                this.props.addForm(newForm);
  34 |            }
  35 |        );
  36 |    };

【问题讨论】：

它看起来设置正确，可能是代码的陈旧版本？我推测包含_this 的错误您正在使用转译器，您可以尝试手动重建或清理/重建吗？
我也相信你的转译工具有问题，试试console.log(this.props.addForm)看看你在那个变量上到底定义了什么。
不，我相信这是他使用/导入 FormBuilderContainer 组件的方式。我在下面有一个解释。

标签： javascript reactjs redux callback action

【解决方案1】：

我认为这里的问题是您如何导入 FormBuilderContainer 组件，您可以看到您将其导出为：

export class FormBuilderContainer extends Component

在底部你有：

export default connect(
    null,
    { addForm }
)(FormBuilderContainer);

现在，如果你使用下面的方法导入它，那么这会给你错误：

import { FormBuilderContainer } from 'path-to-component-file'

你应该像这样导入它：

import FormBuilderContainer  from 'path-to-component-file'

希望这会有所帮助！

【讨论】：

这解决了问题，谢谢！只需更新我要导入的文件，以便更正它。
很高兴为您提供帮助...！