导出响应组件时，对象引用“未定义”

Question

我在这个站点上看到了类似的关于这个主题的问题，特别是在这里：Cannot destructure property user of 'undefined' or 'null'

但这不符合我的习惯。通过以下反应组件，我得到了以下两个错误：

1.无法对“未定义”的属性“actions”进行未定义的结构。(引用所有具有操作属性的组件) 2.无法对未定义的属性“breach_display_controller”进行重构。(引用Accountbar组件的useState钩子)

注意：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>
    )
}

Answer 1

下面的代码片段演示了如何在functional中获得道具和定义函数。

在functional中，不需要使用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>
  );
}