javascript - 导出 React 组件时对象引用“未定义”
问题描述
我在这个网站上看到过关于这个主题的类似问题,最值得注意的是: Cannot destructure property `user` of 'undefined' or '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>
)
}
解决方案
以下代码片段展示了如何在功能组件中获取道具和定义函数。
在功能组件中,您不需要使用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>
);
}
推荐阅读
- uml - 如何在 UML 中显示应用程序重新启动?
- azure-active-directory - Azure AD B2C 自定义策略 - 向第 3 方发送查询字符串参数
- python - 如果我在参数列表中传递“self”来初始化 QLayout,是否可以跳过调用 setLayout() 方法?
- javascript - MongooseError [CastError]:模型“order”的路径“userData.email”的值“{}”转换为字符串失败
- mysql - 使用 LEFT JOIN 进行 MySql ENUM 排序
- clearcase - 当基线是增量时,为什么将标签应用于我的版本
- amazon-web-services - 基于客户端浏览器限制对静态 s3 站点的访问
- shell - 入口 shell 脚本(启动前端和后端)应该有什么名称?
- c# - C# - 以类型安全的方式将输入对象映射到效果对象
- angular - 如何将 aria-expanded 设置为 html 选择