Reactjs 在高阶组件中调用useEffect

更新后，React不再编译带有高阶组件（HOC）中的

useffect

挂钩的代码。我有一个HOC连接到Redux存储，并在需要时发送一个操作来获取数据

import React, {useEffect} from 'react'
import PropTypes from 'prop-types' 
import { connect } from 'react-redux'

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


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

    // Initial loading and error
    if (status === undefined || object === undefined) return <SpinCenter/>
    if (status.error) return <>error loading: {status.error.message}</>

    // Pass through the id for immediate access
    return <WrappedComponent {...{object, status, id}} {...rest} />
  }

  hoc.propTypes = {
    object: PropTypes.object,
    status: PropTypes.object,
    fetchObject: PropTypes.func.isRequired,
  }

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

  const mapDispatchToProps = {
    fetchObject
  }

  const WithConnect = connect(mapStateToProps, mapDispatchToProps)(hoc)
  return <WithConnect/>
}

export default withObject

---

组件名称需要以大写字符开头，这就是为什么会出现此问题的原因。您还可以优化connect和hoc代码，一次返回hoc实例，而不是一次又一次地返回

const withObject = ({element}) => WrappedComponent => {
  const Hoc = ({id, status, object, fetchObject,...rest}) => {
    useEffect(() => {
      fetchIfNeeded(
        status,
        ()=>fetchObject(element, id),
      )
    })

    // Initial loading and error
    if (status === undefined || object === undefined) return <SpinCenter/>
    if (status.error) return <>error loading: {status.error.message}</>

    // Pass through the id for immediate access
    return <WrappedComponent {...{object, status, id}} {...rest} />
  }

  Hoc.propTypes = {
    object: PropTypes.object,
    status: PropTypes.object,
    fetchObject: PropTypes.func.isRequired,
  }

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

  const mapDispatchToProps = {
    fetchObject
  }

  return connect(mapStateToProps, mapDispatchToProps)(Hoc)
}

export default withObject

constwithobject=（{element}）=>WrappedComponent=>{
const Hoc=（{id，status，object，fetchObject，…rest}）=>{
useffect（（）=>{
吸引人的(
地位
（）=>fetchObject（元素，id），
)
})
//初始加载和错误
如果（状态===未定义| |对象===未定义）返回
if（status.error）返回加载错误：{status.error.message}
//通过id进行即时访问
返回
}
Hoc.propTypes={
对象：PropTypes.object，
状态：PropTypes.object，
fetchObject:PropTypes.func.isRequired，
}
常量mapStateToProps=状态=>({
对象：state.data[element][id]，
状态：state.objects[element][id]
})
const mapDispatchToProps={
获取对象
}
返回连接（mapStateToProps、mapDispatchToProps）（Hoc）
}
导出默认withObject

哦，天哪，事实上就是这样。好的。从React的角度来看，这有点苛刻。是的，从编译器的角度来看，这是苛刻的。再看看最新的答案。从性能角度来看，这可能会有所帮助您更新的答案也是我的第一种方法，但它返回的是一个对象而不是React组件，并告诉我：

对象在使用时作为React子对象无效

，不是说不应该在组件内创建实例，而是在itI之外。我认为这正是我正在做的，但是在现有的代码库中，事情变得有点难以改变。我将尝试在一个专用的代码沙盒中进行演示。谢谢你。

const withObject = ({element}) => WrappedComponent => {
  const Hoc = ({id, status, object, fetchObject,...rest}) => {
    useEffect(() => {
      fetchIfNeeded(
        status,
        ()=>fetchObject(element, id),
      )
    })

    // Initial loading and error
    if (status === undefined || object === undefined) return <SpinCenter/>
    if (status.error) return <>error loading: {status.error.message}</>

    // Pass through the id for immediate access
    return <WrappedComponent {...{object, status, id}} {...rest} />
  }

  Hoc.propTypes = {
    object: PropTypes.object,
    status: PropTypes.object,
    fetchObject: PropTypes.func.isRequired,
  }

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

  const mapDispatchToProps = {
    fetchObject
  }

  return connect(mapStateToProps, mapDispatchToProps)(Hoc)
}

export default withObject