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

Question

我有一个动作

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

我认为这更多的是语法错误，但我们将不胜感激。

Answer 1

问题出在这一行：

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

您需要传递一个 prop 来调用操作，不是函数调用的结果。
您需要调用道具，而不是动作创建器方法。

因此，将该行更改为：

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

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

React-redux dispatch function with parameters from child component is undefined

javascript

reactjs

react-redux

formik