反应错误：“值”未定义，无未定义

Question

我正在尝试使用 NPX create-react-app 构建请求表单。 该应用程序有六个组件：UserForm（充当容器）RequestType、UserDetails、PaymentDetails、Confirmation 和 Success。 RequestType 组件中共有三种请求类型供用户选择。 根据用户的选择，Payment Details 组件将呈现不同的字段供用户填写。 因此，确认组件需要根据付款详细信息组件中呈现的内容显示不同的项目。

我的确认组件中出现“值”未定义错误（代码如下）。 我使用 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”，代码似乎产生了预期的结果。但我不知道它为什么起作用。再一次，谢谢你..