Question

我无法使用提供的初始值填充表单字段。拿到卡住了。
我正在使用＆＃34;反应＆＃34;：＆＃34; ^ 16.2.0＆＃34;和redux-form＆＃34;：＆＃34; 7.4.0＆＃34;。请帮我解决我在代码中遇到的问题。即使我累了硬编码的初始值，但仍然没有运气。

有人可以帮帮我吗？

这是我的代码。花了大部分时间用于此。

import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'
import { SubmissionError } from 'redux-form'
import { addStore } from "../actions/storeActions.js";
import { loadStore } from "../actions/storeActions.js";
//import submit from './submit'
import './bundle.css';
const required = value => (value ? undefined : 'Required')
const phoneNumber = value =>
    value && !/^(0|[1-9][0-9]{9})$/i.test(value)
        ? 'Invalid phone number, must be 10 digits'
        : undefined

const number = value =>
    value && isNaN(Number(value)) ? 'Must be a number' : undefined
const renderField = ({ input, label, type, value, meta: { touched, error } }) => (
    <div>
        <label>{label}</label>
        <div>
            <input {...input} placeholder={label} type={type} value={value} />
            {touched && error && <span>{error}</span>}
        </div>
    </div>
)
function throwError(msg) {
    throw new SubmissionError({
        _error: msg
    })
}

function submit(values, props) {
    console.log(values, props);
    let msg;
    if ((msg = required(values.storeName)) !== undefined) {
        throwError("Store name is required")
    } else if ((msg = required(values.address)) !== undefined) {
        throwError("Address is required")
    } else if ((msg = required(values.phone)) !== undefined) {
        throwError("Phone number is required")
    } else if ((msg = phoneNumber(values.phone)) !== undefined) {
        throwError(msg)
    } else {
        props.dispatch(addStore(values, props.router));
    }
    //})
}

let StoreForm = props => {
    const { error, handleSubmit, pristine, reset, submitting, } = props
    return (

        <form onSubmit={handleSubmit(values => { submit(values, props) })}>

            <Field
                name="storeName"
                component={renderField}
                type="text"
                placeholder="Store Name"
                label="Store Name"

            />

            <Field
                name="address"
                component={renderField}

                type="text"
                placeholder="Address"
                label="Address"
            />
            <Field
                name="description"
                component={renderField}
                type="text"
                placeholder="Description"
                label="Description"
            />
            <Field
                name="phone"
                component={renderField}
                type="text"
                placeholder="Phone"
                label="Phone"

            />

            {error && <strong>{error}</strong>}
            <div>
                <button type="submit" disabled={submitting}>
                    Log In
        </button>
                <button type="button" disabled={pristine || submitting} onClick={reset}>
                    Clear Values
        </button>
            </div>
        </form>
    )
}

const mapDispatchToProps = dispatch => {
    return {
        initialValues: () => dispatch(loadStore())
    };
};

const mapStateToProps = (state) => {
    return {
        initialValues: state.storeReducer.items

    }
};


StoreForm = reduxForm({
    form: 'initializeFromState' // a unique identifier for this form
})(StoreForm)


StoreForm = connect(
    state => ({
        initialValues: { storeName: "SURSH" },
    })
)(StoreForm)





export default StoreForm

Answer 1

你没有在Field组件中传递价值

Answer 2

这是由于value函数中错误使用renderField引起的。

您可以在official props docs中看到，value是input属性的一部分。

您必须通过以下方式重构函数：

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div>
        <label>{label}</label>
        <div>
            <input {...input} placeholder={label} type={type} />
            {touched && error && <span>{error}</span>}
        </div>
    </div>
)

我无法使用州的初始值填充表单

2 个答案: