Reactjs 使一个道具可供用户使用

我已经编写了一个更高阶的组件，它向API发送一个fetch方法，并提供

数据和（加载）
状态，给定
id

我的问题是：如何使HOC可以使用
id
属性

import React from 'react'

import withObject from '../hocs/withObject'

const Organization = ({status, object}) => {
  if (status.error) return <>error message</>
  if (status.isFetching) return <>spinner</>
  return <h1>{object.name}</h1>
}

// this works
// export default withObject(
//   Organization,
//   {element: 'organization', id: 'hard-coded-id'}
// )

// this does not, see below
export default ({id}) => withObject(
  Organization,
  {element: 'organization', id}
)

我有点困惑-你把
id
传给你的HOC，它已经可用了-问题是它在你的useffect中没有定义吗？实际上，它在
getObject
中可用，但你似乎没有调用
HOC
任何我从未见过的
useffect
用作回调的地方。我认为这会对你有所帮助。请参阅。@WillJenkins我尝试将其提供给
getObject
HOC，如果我能将
id
传递给它，
getObject
就可以了。使用硬编码的
id
可以正常工作。
import React, {useEffect} from 'react'
import { connect } from 'react-redux'

import { fetchObject } from '../actions/objects'
import { fetchIfNeeded } from '../utils'

const withObject = (WrappedComponent, {element, id}) => {

  const hoc = ({status={}, object={}, fetchObject}) => {
    useEffect(() => {
      fetchIfNeeded(
        status,
        ()=>fetchObject(element, id),
      )
    })

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

  const mapStateToProps = state => ({
    object: state.data[element][id],
    status: state.objects[element][id]
  })

  const mapDispatchToProps = {
    fetchObject
  }

  return connect(mapStateToProps, mapDispatchToProps)(hoc)

}

export default getObject

Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent, displayName}).