React组件导出时出现undefined对象引用解构报错

通用解构错误的来源 #

React 函数组件的调用规则非常固定：不管你给组件传多少个prop，组件函数只会收到1个包含所有prop的单一对象作为入参，绝不会把每个prop拆成独立的参数依次传进去。
你现在的Accountbar组件定义：

export default function Accountbar({actions}, {contacts_display_controller} ,{breach_display_controller})

直接把3个prop拆成了3个独立的解构形参。实际渲染时，React只会把装满3个prop的对象丢给第一个形参，剩下的第二、第三个形参因为没有对应实参，拿到的永远是undefined。对undefined做属性解构，就会直接抛出“Cannot destructure property 'xxx' of 'undefined'”——这就是你遇到breach_display_controller解构报错的直接原因。
你提到的“所有带actions的组件都报actions解构错误”，本质是这些组件的定义和Accountbar犯了一模一样的错：你把actions的解构位置放到了第二、第三个没有实参的形参上，用来解构actions的源对象本身就是undefined，自然会触发对应的报错。

额外的隐藏坑 #

你在Accountbar里写了挂载this方法的逻辑，但函数组件运行在ES模块的严格模式下，函数内部的this本身就是undefined，就算解构报错修好了，后续给this赋值属性也会直接抛错。这类挂载this的写法是类组件的逻辑，不能直接套在函数组件上。

• 统一修正所有函数组件的参数解构方式：把所有prop的解构逻辑，全部合并到第一个形参的单个对象里，不要再拆分独立的解构形参。
  修正后的Accountbar示例：

  import React from 'react'
  
  // 所有props统一在第一个形参的对象内解构
  export default function Accountbar({ actions, contacts_display_controller, breach_display_controller }) {
      // 替换掉类组件挂this的逻辑，直接在函数作用域内定义方法
      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>
      )
  }
  

• 对照这个写法，逐一排查其他接收actions的组件（Newpersonpopup、Newentrypopup、Confirmbreachpopup、ContactsPopup、Createcontactspopup），把散落在不同形参位置的prop解构全部合并到第一个形参的对象中，就能消除所有和actions相关的解构报错。
• 补个简单的健壮性校验：在HubPage里new Client(params)之后打印下实例值，确认Interface的方法、属性是完整初始化的——如果Client类的构造函数因为传入的params不匹配中断了初始化，哪怕props传对了，后续调用actions.logout这类方法也会运行失败。

• 别把React函数组件和普通工具函数的参数逻辑混淆：普通工具函数可以接收多个独立参数，但组件函数永远只接一个props对象。
• 函数组件作用域内直接定义需要用的方法、状态即可，不要硬套类组件的this绑定逻辑。

内容的提问来源于stack exchange，提问作者RonsJurisdiction