Question

我正在尝试将代码从react-form迁移到react-final-form。我尝试遵循官方文档，但遇到错误。我收到“无法读取未定义的属性TipForm” 以下是在Render（）之后出现此错误的代码

import React, {Fragment} from "react";
import {connect} from 'react-redux';
import SubMenu from './SubMenu';
import TipForm from './form/TipForm';

class Tip extends React.PureComponent {
 render() {
  let tip_amount = this.props.tipForm.TipForm ? this.props.tipForm.TipForm.tip_amount : "0.00"
   return(
    <Fragment> 
     <SubMenu/>
     <TipForm
         initialValues={{tip_amount: "$0.10",}}
         selectedTip={tip_amount}
         onSubmit={this.handleSubmit}
     />
    </Fragment>
   )
 }
}

const mapStateToProps = (state) => {
 return{tipForm: state.form}
}
export default connect(mapStateToProps, {})(Tip);

下面的表格是我从中获取价值的地方。

import React from "react";
import PropTypes from "prop-types";
import {Checkbox,Radio,Input} from "src/components/Common";
import { tipOptions } from "src/utils/options";
import { noop } from "src/utils/noop";
import {Form} from "react-final-form";


const TipForm = ({ onSubmit, selectedTip }) => {
  return<Form onSubmit={onSubmit}>{({handleSubmit}) => (
   <form onSubmit={handleSubmit(onSubmit)}>
     {tipOptions.map((tipOption, i) => {
       return<Radio
              key={i}
              label={tipOption.label}
              name="tip_amount"
              type="radio"
              value={tipOption.value}
              className="tip-options"
             >
            </Radio>
       })}

        <button type="submit" className="btn-primary">TIP {selectedTip}/MIN</button>
    </form>
    )}
   </Form>
};

TipForm.propTypes = {
  handleSubmit: PropTypes.func,
  onSubmit: PropTypes.func
};

TipForm.defaultProps = {
  handleSubmit: noop,
  onSubmit: noop
};

export default TipForm;

谢谢！

react-final-form抛出ERROR属性未定义

0 个答案: