Question

我有一个功能/哑组件，它有一个redux表单来更新用户。请找到以下代码：

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { InputText } from './shared';
import { Row, Col, Button } from 'react-bootstrap';

const required = value => (value ? undefined : 'Required');

let UpdateUser = ({ user, handleSubmit }) => (
    <div className="content">
        <form onSubmit={handleSubmit}>
            <Row>
                <Col xs={4} sm={4} md={4}>
                    <Field
                        name="name"
                        component={InputText}
                        type="text"
                        validate={[required]}
                        label="Name"
                    />
                </Col>
            </Row>
            <Row>
                <Col xs={4} sm={4} md={4}>
                    <Button type="submit" className="primary">Submit</Button>
                </Col>
            </Row>
        </form>
    </div>
)

UpdateUser = reduxForm({
    form: 'updateUser'
})(UpdateUser);

export default UpdateUser;

我想用传递给组件的用户的默认名称更新用户的默认名称，即user.name。例如，对于以下代码：

UpdateUser = reduxForm({
    form: 'updateUser',
    initialValues: {
        name: user.name
    }
})(UpdateUser);

它表示用户未定义，因为它无法访问。如何在函数组件中传递redux表单的初始值？

由于

Answer 1

您需要在表单中使用redux状态变量。您需要通过connect访问这些内容。我过去做过这种方法的一种方法是将initialValues放在connect函数中，将这些道具传递给子（redux格式）。

const mapStateToProps = (state) => {
    return {
        ...state.user
        initialValues: {
            name: state.user.name
        }
    };
};

UpdateUser = reduxForm({
    form: 'updateUser'
})(UpdateUser)

export default connect(mapStateToProps)(UpdateUser)

Redux形式：在功能组件中设置初始值

1 个答案: