导出 React 组件时"undefined"的对象引用

Question

我在这个网站上看到过关于这个主题的类似问题，最值得注意的是：不能破坏'；未定义'；或者'；null'；

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

---

1.无法销毁"undefined"的属性"actions"，因为它是未定义的。(指具有操作属性的所有组件(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

下面的代码片段展示了如何在功能组件中获取道具和定义函数。

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