Функция отправки React-redux с параметрами из дочернего компонента не определена - PullRequest
Новая
       16

Функция отправки React-redux с параметрами из дочернего компонента не определена

0 голосов
/ 06 февраля 2020

У меня есть действие 

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

Я думаю, что это скорее синтаксическая ошибка, чем любая другая, но любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 06 февраля 2020

Проблема в этой строке: 

return <NewTask saveNewTask={saveNewTask()} />;
  1. Вам необходимо передать реквизит для вызова действия , , а не результата вызов функции.
  2. Вы должны вызывать свою опору, а не метод создателя действия.

Итак, измените эту строку на: 

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