Как передать данные из формы в mapDispatchToProps в React

Question

Я новичок, чтобы отреагировать, пытаясь создать форму входа, способную извлечь имя пользователя и пароль из формы. Но у меня возникают проблемы при попытке передать это в mapDispatchToProps для отправки его в бэкэнд.

Как бы я go узнал о получении имени пользователя и пароля из «значений» для фактической передачи его в mapDispatchToProps?

Я получаю сообщение об ошибке, говорящее, что «onAuth» не доступен вне функции.

Вот фрагмент кода:

const NormalLoginForm = (props) => {


  const onFinish = values => {
    const onAuth = (values.username, values.password) // This is where the error is occuring
    console.log('Success:', values);
  };

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  return (
  
        <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            >
            <Form.Item
                label="Username"
                name="username"
                rules={[
                {
                    required: true,
                    message: 'Please input your username!',
                },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="Password"
                name="password"
                rules={[
                {
                    required: true,
                    message: 'Please input your password!',
                },
                ]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                 Submit
                </Button>
                <NavLink 
                    style={{marginRight: '10px'}}
                    to='/signup/'> Signup
                </NavLink>

            </Form.Item>
        </Form>
  );
};



const mapStateToProps = (state) => {
    return {
        loading: state.loading,
        error: state.error
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onAuth: (username, password) => dispatch(actions.authLogin(username, password))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(NormalLoginForm);

Answer 1

Вам необходимо заменить const onAuth = (values.username, values.password) на props.onAuth(values.username, values.password).

Независимо от того, какие параметры мы определяем в mapDispatchToProps или mapStateToProps, для компонента в качестве компонента props.

Answer 2

Похоже, что mapDispatchToProps уже настроен правильно, вам просто нужно вызвать созданную им функцию.

const onFinish = values => {
  props.onAuth(values.username, values.password);
}