Я видел подобные вопросы по этой теме на этом сайте, особенно здесь: Невозможно деструктурировать свойство user на undefined или null

Но это не подходит для моего варианта использования. При использовании следующих компонентов реакции я получаю две следующие ошибки:


1. Невозможно деструктурировать свойство "actions" для "undefined", поскольку оно не определено. (относится ко всем компонентам, имеющим атрибут действия) 2. Невозможно деструктурировать свойство breach_display_controller на undefined, так как оно не определено. (Ссылка на ловушку useState компонента Accountbar)


Примечание. Класс Client находится в том же файле, что и класс HubPage.

родительский компонент:

export default function HubPage(params) {
        var Interface = new Client(params)
        const [person , changeperson] = useState(null)
        const [all_persons , addperson] = useState(Interface.profile_data)
        const [contacts_display_state , change_contacts_display_state] = useState(false);
        const [breach_display_state , change_breach_display_state] = useState(false);
        const [add_contact_display_state, change_add_contact_display_state] = useState(false);
        const [new_entry_display_state , change_new_entry_display_state] = useState(false);
        const [new_person_display_state, change_new_person_display_state]= useState(false);
        const [image_state , change_image_state] = useState(false);
       
    
        
            return (
                
                
                <div id = "hub_main_wrapper">    
                    <Profilesummary data = {person}/>
                    <Entryhubview data = {person}/>
                    <Profileview
                     persons = {all_persons} 
                     display_selector = {changeperson} 
                     />
    
                    <DetailsView data = {person}/>
                    <StatsBar 
                        data = {all_persons} 
                        all_selector = {addperson} 
                    />
                    <Accountbar 
                            contacts_display_controller = {change_contacts_display_state}  
                            actions = {Interface} 
    
                            breach_display_controller = {change_breach_display_state}
                    />
                    <Newpersonpopup 
                            actions = {Interface}
                            self_state_controller = {change_new_person_display_state}
                            state = {new_person_display_state}
                            image_state = {image_state}
                            image_state_controller = {change_image_state}
                    />    
                    <Newentrypopup 
                            actions = {Interface}
                            self_state_controller = {change_new_entry_display_state}
                            state = {new_entry_display_state}
                    />
                    <Confirmbreachpopup 
                            actions = {Interface}
                            state = {breach_display_state}
                            self_state_controller = {change_breach_display_state}
                    />    
                    <ContactsPopup 
                            add_state_controller = {change_add_contact_display_state} 
                            self_state_controller = {change_contacts_display_state}
                            state= {contacts_display_state}  
                            actions = {Interface} 
                    />
                    <Createcontactspopup 
                            state= {add_contact_display_state} 
                            self_state_controller = {change_add_contact_display_state}
                            actions = {Interface}
                    />    
                </div>
                    
            )
        
    }

компонент Accountbar:

import React from 'react'

export default function Accountbar({actions}, {contacts_display_controller} ,{breach_display_controller}) {
    var self = this;
    this.check_logout_status = async function(){
        const response = await actions.logout()
        if(response.status == "error"){
            //popup
        }
        else{
            //popup
        }   
    }

    
    return (
        <div id = "accountbar">
            <button id = "logoutbutton" onClick = {self.check_logout_status}> Logout </button>
            <button id = "contactsbutton" onClick = {function(){actions.change_display_state(contacts_display_controller)}}>Contacts</button>
            <button id = "breachbutton"onClick = {function(){actions.change_display_state(breach_display_controller)}} >Breach(Very Dangerous)</button>
            
        </div>
    )
}
0
RonsJurisdiction 15 Янв 2021 в 10:28

2 ответа

Лучший ответ

В следующем фрагменте кода показано, как получить реквизиты и определить функции в функциональном компоненте.

В функциональном компоненте вам не нужно использовать экземпляр this.

компонент Accountbar :

import React from 'react';

export default function Accountbar({
  actions,
  contacts_display_controller,
  breach_display_controller,
}) // props
{
  // define function
  const check_logout_status = async () => {
    const response = await actions.logout();
    if (response.status == 'error') {
      //popup
    } else {
      //popup
    }
  };

  return (
    <div id="accountbar">
      <button id="logoutbutton" onClick={check_logout_status}>
        Logout
      </button>
      <button
        id="contactsbutton"
        onClick={() => actions.change_display_state(contacts_display_controller)}
      >
        Contacts
      </button>
      <button
        id="breachbutton"
        onClick={() => actions.change_display_state(breach_display_controller)}
      >
        Breach(Very Dangerous)
      </button>
    </div>
  );
}
1
DevMaster 15 Янв 2021 в 07:39

Вы неправильно деструктурируете пропсы, поэтому и получаете эту ошибку.

Попробуй это:


import React from "react";

export default function Accountbar({
  actions,
  contacts_display_controller,
  breach_display_controller,
}) {
  check_logout_status = async function () {
    const response = await actions.logout();
    if (response.status == "error") {
      //popup
    } else {
      //popup
    }
  };

  return (
    <div id="accountbar">
      <button id="logoutbutton" onClick={check_logout_status}>
        {" "}
        Logout{" "}
      </button>
      <button
        id="contactsbutton"
        onClick={() => {
          actions.change_display_state(contacts_display_controller);
        }}
      >
        Contacts
      </button>
      <button
        id="breachbutton"
        onClick={() => {
          actions.change_display_state(breach_display_controller);
        }}
      >
        Breach(Very Dangerous)
      </button>
    </div>
  );
}

И нет необходимости использовать this в функциональных компонентах.

0
Ketan Ramteke 15 Янв 2021 в 07:40
65732038