导出 React 组件时对象引用“未定义”

Question

我在这个网站上看到过关于这个主题的类似问题，最值得注意的是：Cannot destructure property `user` of 'undefined' or 'null'

但这不适合我的用例。使用以下反应组件，我收到以下两个错误：

---

1.不能解构'undefined'的属性'actions'，因为它是未定义的。（指所有具有action属性的组件） 2. 'undefined' 的属性'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

下面的代码sn-p展示了如何在函数组件中获取props和定义函数。

在功能组件中，不需要使用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>
  );
}