Question

遇到此错误，但是我的代码确实找不到问题。错误指向代码的ReactDOM.render行。但我找不到问题。

重构我的代码无济于事。我经历了其他变量声明以及代码中的所有内容，但似乎找不到使错误消失的任何东西！

import React from 'react';
import { Field,reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { createStream } from '../../actions/index';

class StreamCreate extends React.Component {
    renderError=({error,touched})=>{
        if(touched && error){
            return (
                <div className="ui error message">
                    <div className="header">{error}</div>
                </div>
            );
        }
    }


    renderInput=({ input,label,meta })=>{
        const className=`field ${meta.error && meta.touched ? 'error':''}`;
        return (<div className={className}>
                    <label>{label}</label>
                    <input {...input} autoComplete="off"/>
                    {this.renderError(meta)}
                </div>        
            );    
        }

    onSubmit=(formValues)=>{
        this.props.createStream(formValues);
    };

    //redux-form changes it all!
    render(){
        return (
                    <form onSubmit={this.props.handleSubmit(this.onSubmit)} className="ui form error">
                        <Field name="title" component={this.renderInput} label="Enter Title"/>
                        <Field name="description" component={this.renderInput} label="Enter Description"/>
                        <button className="ui button primary">Submit</button>
                    </form>
        );
    }
}

const validate=(formValues)=>{
    const errors={};
    if(!formValues.title){
        errors.title ='You must enter a title'
    }
    if(!formValues.description){
        errors.description='you must enter a description'
    }
    return errors;
};


const formWrapped =  reduxForm({
    form: 'streamCreate',
    validate: validate
})(StreamCreate);

export default connect(null,{ createStream })(formWrapped);

//My app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';


import App from './components/App';
import reducers from './reducers/index';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers,composeEnhancers(applyMiddleware(reduxThunk)));

ReactDOM.render(<Provider store={store}><App/></Provider>,document.querySelector('#root'));

//reducers index.js
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import authReducer from './authReducer';


export default combineReducers({
    auth: authReducer,
    form: formReducer 
});

//authreducer.js
import { SIGN_IN,SIGN_OUT} from '../actions/types';
const INITIAL_STATE={
    isSignedIn: null,
    userId: null
};


export default(state=INITIAL_STATE,action) =>{
    switch(action.type){
        case SIGN_IN:
        return {...state,isSignedIn: true, userId: action.payload };
        case SIGN_OUT:
        return {...state,isSignedIn: false, userId: null };
        default:
        return state;
    }
};

没有错误并且可以查看页面

Answer 1

将您的Redux表单更新为版本8.1，因为您的代码符合版本8.1。 Redux-form在6.1版中被完全重写。这里是8.1版指南的链接。 v5 → v6 Migration Guide

Answer 2

npm i -S redux-form@8.1

或者如果您使用纱线

yarn add redux-form@8.1

为什么？

错误地将redux-form中的最新标签指向5.4.0。

$ yarn -s info redux-form dist-tags
{ latest:
   '5.4.0',
  rc:
   '8.0.0-0',
  old:
   '5.3.6',
  alpha:
   '7.0.0-alpha.9' }

此问题已在此处跟踪：https://github.com/erikras/redux-form/issues/4405

错误：初始化状态时必须传递字段，怎么办？

2 个答案: