Question

这是我的第一篇文章，如果我错过了任何内容，或者这是啰嗦，那么道歉。我正在开发一个udemy教程来创建一个带有几个文本输入的表单（使用redux-form），用户可以在提交之前单击next并查看其表单值。以下代码是表单的“审核”页面目的是从状态中提取表单值并将它们添加到SurveyFormReview组件的props中，但是，当单击下一个按钮（显示SurveyFormReview）时，我收到错误“无法读取未定义的属性值”。我已经发现mapStateToProps被调用两次，但我无法弄清楚原因。当我发现这个问题的其他实例时，人们说这是由于在调用mapStateToProps的组件中嵌套了另一个组件引起的，但我在这里没有这个问题。我可以说的是，包含surveyForm和surveyFormReview组件的父组件也初始化状态。这用于设置确定是否显示surveyForm或surveyFormReview的标志。有什么想法吗？

import _ from 'lodash';
import React from 'react';
import { connect } from 'react-redux';
import formFields from './formFields';

const SurveyFormReview = ({ onCancel, formValues }) => {
// Grabs input field labels and names from external formFields array and inserts
// user values from formValues.
const reviewFields = _.map(formFields, field => {
    return (
        <div key={field.name}>
            <label>{field.label}</label>
            <div>
                {formValues[field.name]}
            </div>
        </div>
    );
});

return (
    <div>
        <h5>Please confirm your entries</h5>
        {reviewFields}
        <button className="yellow darken-3 btn-flat" onClick={onCancel}>
            Back
        </button>
    </div>
  );
};

const mapStateToProps = state => {
  console.log(state);
  return { formValues: state.form.surveyForm.values };
}

export default connect(mapStateToProps)(SurveyFormReview);

mapStateToProps调用了两次

0 个答案: