带有子组件参数的 React-redux 调度函数未定义答案

【问题标题】：React-redux dispatch function with parameters from child component is undefined带有子组件参数的 React-redux 调度函数未定义
【发布时间】：2020-02-06 09:51:45
【问题描述】：

我有一个动作

export const saveNewTask = (taskName, taskDescription) => async dispatch => {
  console.log(taskName, taskDescription);
  const res = await axios.post('/api/add-new-task', {
    taskName,
    taskDescription
  });
  console.log(res);
  dispatch({ type: SAVE_TASK, payload: res.data });
};

包含一个子容器的父容器，它是一个 Formik 表单，应该允许子组件通过上述操作将 Formik 表单内容保存到数据库。

import { saveNewTask } from '../actions/index';

class ClientDashboard extends React.Component {
  render() {
    return <NewTask saveNewTask={saveNewTask()} />;
  }
}

export default connect(null, { saveNewTask })(Container);

NewTask.js 子组件，对 Redux 一无所知：

function NewTask(props) {
  const formik = useFormik({
    initialValues: {
      taskName: '',
      taskDescription: ''
    },
    onSubmit: values => {
      // alert(JSON.stringify(values, null, 2));
      props.saveNewTask(values.taskName, values.taskDescription);
    }
  });
...
}

但该操作永远不会获得我试图通过 Formik 组件传递的参数（注释的警报行完美地显示了这两个值）并说 taskName 和 taskDescription 都未定义。动作最后一行的调度也说

Uncaught (in promise) TypeError: dispatch is not a function at Object.saveNewTask

我认为这更像是一个语法错误，但任何帮助都将不胜感激。

【问题讨论】：

标签： javascript reactjs react-redux formik

【解决方案1】：

问题出在这一行：

return <NewTask saveNewTask={saveNewTask()} />;

您需要传递一个用于调用动作的道具，不是函数调用的结果。
你需要调用你的 prop，而不是你的 action creator 方法。

所以，将该行更改为：

return <NewTask saveNewTask={this.props.saveNewTask} />;

【讨论】：

最初这就是我所做的，但后来什么都没有发生，甚至没有调用该动作
这行得通！谢谢，但是在官方的 react-redux todo 示例中，他们直接调用动作创建者而不使用 this.props。为什么我们需要 this.props？
我不相信你没看错。你能指出我的资源吗？
"codesandbox.io/s/9on71rvnyo" 取自 /src/components/Todo.js 下的 "react-redux.js.org/introduction/basic-tutorial" 他们在没有 this.props 的情况下直接使用 toggleTodo 操作
或者，如果你的意思是toggleTodo，你会看到它是从功能组件的参数中解构出来的——这意味着props。