是否可以通過HOC中的react-redux將帶有數據的數組傳輸到另一個組件

Question

我可能會丟失一些東西，但找不到任何示例如何將帶有數據的數組從HOC組件傳遞到另一個組件。 這是我的代碼

 import React from 'react' import NoAccessPage from '../../pages/Admin/NoAccess'; import { menuItems } from '../../config/menu'; import {connect} from 'react-redux' const AuthorizationHOC = (access) =>{ (WrappedComponent) => class WithAuthorization extends React.Component { constructor(props) { super(props) this.state = { user: { accessItems: [ 'reseptionPointsAccess', 'servicesAccess' ] } } } render() { const { accessItems } = this.state.user; let menuAccess = []; menuItems.forEach(item => { if (accessItems.includes(item.access)) { menuAccess.push(item) } }) return ( <div> {accessItems.includes(access) ? <WrappedComponent {...this.props} /> : <NoAccessPage/> } </div> ) } } } const mapStateToProps = state => { return { menuArray: state } } export default connect(mapStateToProps)(AuthorizationHOC) 

我想將array menuAccess傳遞給另一個組件，但是無法通過connect包裝AuthorizationHOC 。

在控制台中，我收到了

Cannot call a class as a function

Answer 1

您無需使用connect包裝HOC，您需要的是使用connect包裝返回的組件

import React from 'react'
import NoAccessPage from '../../pages/Admin/NoAccess';
import { menuItems } from '../../config/menu';
import {connect} from 'react-redux'

const AuthorizationHOC = (access) =>{
  (WrappedComponent) => {
     class WithAuthorization extends React.Component {
      constructor(props) {
        super(props)

        this.state = {
          user: {
              accessItems: [
                'reseptionPointsAccess',
                'servicesAccess'
              ]
          }
        }
      }

      render() {
          const { accessItems } = this.state.user;

          let menuAccess = [];

          menuItems.forEach(item => {
              if (accessItems.includes(item.access)) {
                  menuAccess.push(item)
              }
          })

          return (
              <div>
                  {accessItems.includes(access) ? <WrappedComponent {...this.props} /> : <NoAccessPage/> }
              </div>
          )
      }
    }
    return connect(mapStateToProps)(WithAuthorization);
  }
}
const mapStateToProps = state => {
    return {
        menuArray: state
    }
}

export default AuthorizationHOC;

Answer 2

Okey，我嘗試使用此代碼，現在在控制台中出現此錯誤：

 (0 , _AuthorizationHOC2.default)(...) is not a function 

呈現我的HOC期間顯示此錯誤

 <Route path="/link" exact component={AuthorizationHOC('listOfOrdersAccess')(ListOfOrders)} />