Javascript 如何连接Dropzone&；重复形式

我试图用redux表单连接dropzone组件，但没有用。提交我的表单并呈现MyFormReview组件时，Redux存储中的formValues似乎不包含文件，因此不会呈现。我已经找过类似的帖子，但看不出哪里出了问题。提前感谢您的帮助，如果您需要更多信息，请告诉我

我没有包含父窗体组件的代码，因为它只是在MyForm和MyFormReview之间呈现

非常感谢

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { reduxForm, Field } from 'redux-form';
import Dropzone from './Dropzone';

class MyForm extends Component {

    render() {
        return (
            <form onSubmit={this.props.handleSubmit(this.props.onFormSubmit)} >
               <div className="flex flex-column">
                  <div className="flex center w-50 mb2">
                      <Field
                      name="files"
                      component={Dropzone}
                  />
               </div>
                    <div>
                        <Link to="/dashboard">
                            <Button>Cancel</Button>
                        </Link>
                        <button primary type="submit">
                            Review
                        </button>
                    </div>
                </div>
            </form>
       );
    }
};

export default reduxForm({
    validate,
    form: 'myForm',
    destroyOnUnmount: false
})(MyForm);

以下是MyFormReview组件：

import React, {Component} from 'react';
import {DropzoneArea} from 'material-ui-dropzone';

class Dropzone extends Component{
  constructor(props){
    super(props);
    this.state = {
      files: []
    };

  }
  handleChange(files){
    this.setState({
      files: files
    });
  }
  render(){
    return (
      <DropzoneArea 
        acceptedFiles = {['image/*']}
        filesLimit = {10}
        dropzoneText="upload your images here!"
        onChange={this.handleChange.bind(this)}
        />
    )  
  }
} 

export default Dropzone;

const MyFormReview = ({ onCancel, formValues, submitForm, history }) => {
    const reviewFields = () => {
            return (
            <div className="ba1 ma1" key={"files"}>
                <label>"Files"</label>
                <div>{formValues["files"]}</div>
            </div>
        )
    });

    return (
        <div>
            <h3>Please confirm your entries</h3>    
            {reviewFields}
            <button className = "yellow darken-3  white-text btn-flat" onClick={onCancel}>
                Back
            </button>
            <button
                className = "green white-text right btn-flat" 
                onClick={() => submitForm(formValues, history)}
            >
                Send Survey
            </button>
        </div>
    );
};

function mapStateToProps(state) {
    return {formValues: state.form.myForm.values};
}

export default connect(mapStateToProps, actions)(withRouter(MyFormReview));

constmyformreview=（{onCancel，formValues，submitForm，history}）=>{
const reviewFields=（）=>{
返回(
“文件”
{formValues[“files”]}
)
});
返回(
请确认您的输入
{reviewFields}
返回
submitForm（formValues，history）}
>
发送调查
);
};
函数MapStateTops（状态）{
返回{formValues:state.form.myForm.values}；
}
导出默认连接（MapStateTrops，actions）（使用路由器（MyFormReview））；

对于任何无意中发现这篇文章的人，以下是我的解决方案：

在Dropzone组件中，handleChange变为：

handleChange(files){
    this.setState({
      files: files
    });
    this.props.input.onChange(files)
}

在myFormReview中，我可以在reviewFields函数中插入以下if语句来预览图像

const reviewFields = _.map(formFields,  ({name, label}) => {
            if(name === "files"){
                return <div>{_.map(formValues[name], (file) => <img alt={file.name} src={URL.createObjectURL(file)} /> )}</div>
            }
            else{
                return (
                    <div className="ba1 ma1" key={name}>
                        <label>{label}</label>
                        <div>{formValues[name]}</div>
                    </div>
                )
            }
    });

const reviewFields=uwfields.map（formFields，（{name，label}）=>{
如果（名称=“文件”）{
返回{{.map（formValues[name]，（file）=>）}
}
否则{
返回(
{label}
{formValues[name]}
)
}
});

对于任何无意中发现这篇文章的人，以下是我的解决方案：

在Dropzone组件中，handleChange变为：

handleChange(files){
    this.setState({
      files: files
    });
    this.props.input.onChange(files)
}

在myFormReview中，我可以在reviewFields函数中插入以下if语句来预览图像

const reviewFields = _.map(formFields,  ({name, label}) => {
            if(name === "files"){
                return <div>{_.map(formValues[name], (file) => <img alt={file.name} src={URL.createObjectURL(file)} /> )}</div>
            }
            else{
                return (
                    <div className="ba1 ma1" key={name}>
                        <label>{label}</label>
                        <div>{formValues[name]}</div>
                    </div>
                )
            }
    });

const reviewFields=uwfields.map（formFields，（{name，label}）=>{
如果（名称=“文件”）{
返回{{.map（formValues[name]，（file）=>）}
}
否则{
返回(
{label}
{formValues[name]}
)
}
});