如何让ID属性在React高阶组件(HOC)中可用？

你的报错根源在于：你现在导出的是一个返回HOC的函数，而不是一个可以被React渲染的组件实例。当React尝试渲染这个导出函数返回的对象（也就是connect包装后的组件类型）时，就会抛出"Objects are not valid as a React child"的错误——因为React需要渲染的是组件实例，而不是组件本身的引用。

问题拆解 #

原来的withObject设计是调用时直接传入固定的id，但你想要的是从父组件动态接收id prop，所以需要调整HOC的逻辑，让它从props中读取id，而不是在创建HOC时传入。

修复后的HOC代码 #

import React, {useEffect} from 'react'
import { connect } from 'react-redux'
import { fetchObject } from '../actions/objects'
import { fetchIfNeeded } from '../utils'

// 修改HOC，不再直接接收id，改为从props中获取
const withObject = (WrappedComponent, {element}) => {
  const hoc = ({status={}, object={}, fetchObject, id}) => { // 从props解构id
    useEffect(() => {
      // 确保id存在时才发起请求
      if (id) {
        fetchIfNeeded(
          status,
          ()=>fetchObject(element, id),
        )
      }
    }, [id, status, fetchObject, element]) // 添加依赖项，避免无限循环

    return <WrappedComponent {...{object, status, element, id}}/>
  }

  // mapStateToProps也改为接收ownProps，从而获取id
  const mapStateToProps = (state, ownProps) => {
    const { id } = ownProps
    return {
      object: id ? state.data[element][id] : {},
      status: id ? state.objects[element][id] : {}
    }
  }

  const mapDispatchToProps = { fetchObject }
  return connect(mapStateToProps, mapDispatchToProps)(hoc)
}

export default withObject // 修正之前的导出命名错误

修复后的业务组件代码 #

现在你可以直接用HOC包裹组件，然后在使用这个组件的时候传入id prop：

import React from 'react'
import withObject from '../hocs/withObject'

const Organization = ({status, object}) => {
  if (status.error) return <>error message</>
  if (status.isFetching) return <>spinner</>
  // 增加可选链，避免object为空时的报错
  return <h1>{object?.name}</h1>
}

// 现在只需要传入element，id由父组件通过props传递
export default withObject(Organization, {element: 'organization'})

使用这个组件的方式 #

在父组件里这样传入动态id：

import Organization from './Organization'

// 比如从路由参数、组件状态等地方获取动态id
const ParentComponent = ({someDynamicId}) => {
  return <Organization id={someDynamicId} />
}

关键调整点 #

• HOC不再接收id参数：改为从包裹组件的props中获取id，支持动态传递。
• mapStateToProps加入ownProps：Redux的connect允许通过第二个参数ownProps获取组件接收的props，从而拿到id去匹配对应的状态。
• useEffect添加依赖项：确保只有当id或相关依赖变化时才重新发起请求，同时避免React的钩子依赖警告。
• 修正导出命名错误：你之前的HOC定义为withObject却导出getObject，这会导致隐性问题。

这样调整后，你的HOC就能完美支持动态id的传递，同时符合React组件的渲染规范。

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