反應錯誤：“值”未定義，無未定義

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”，代碼似乎產生了預期的結果。但我不知道它為什么起作用。再一次，謝謝你..