帶有來自子組件的參數的 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);

對 Redux 一無所知的 NewTask.js 子組件：

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()} />;

1. 您需要傳遞一個prop 來調用 action ，而不是函數調用的結果。
2. 您需要調用您的道具，而不是您的動作創建者方法。

因此，將該行更改為：

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