Question

我正在尝试使用NPX create-react-app构建请求表单。该应用程序包含六个组件：UserForm（充当容器）RequestType，UserDetails，PaymentDetails，确认和成功。用户可以在RequestType组件中选择三种请求类型。根据用户的选择，“付款细节”组件将呈现不同的字段供用户填写。因此，确认组件需要显示与“付款明细”组件中呈现的内容一致的不同项目。

我的“确认”组件（下面提供的代码）中未定义“值”错误。我使用ES6重组从this.props中提取了值，并认为自己定义了“值”。

<p>标签只是以下代码中的占位符，一旦错误消失，我将在其中放入一些JSX标签。

import React, { Component } from 'react';
export default class Confirm extends Component {
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
      };
    back = e => {
        e.preventDefault();
        this.props.prevStep();
     };
    render() {
    const {values: {request, empName, empPersonnelNo, postName, postNumber...more items but are
                omitted here}
               } = this.props;
    return (
        <div>
            {values.request==="actingUp" && <p>You are requesting acting up payments</p>}
        </div>
        )
      }
    }

Answer 1

这是因为您破坏了变量values。首先获取values，然后销毁它。

const {values} = this.props
const {request, empName, empPersonnelNo, postName, postNumber...more items but are
                omitted here} = values

或

return (
        <div>
            {request==="actingUp" && <p>You are requesting acting up payments</p>}
        </div>
        )

代替

return (
        <div>
            {values.request==="actingUp" && <p>You are requesting acting up payments</p>}
        </div>
        )

Answer 2

非常感谢@jonrsharpe尝试帮助我。我实际上不知道如何构造一个最小的可复制示例，因为我的代码相当复杂。但是我以某种方式找到了解决我的问题的方法-通过从'values.request ===“ actingUP'中删除'values'，该代码似乎产生了预期的结果。我不知道为什么会这样。再次，谢谢。。

反应错误：未定义“值”，no-undef

2 个答案: