useEffect 在高阶组件中调用

Question

更新后，React 不再使用高阶组件 (HOC) 中的 useEffect 钩子编译代码。我有一个连接到 Redux 存储并在需要时分派一个操作来获取数据的 HOC。

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

我希望这是有道理的。我想最好的方法是以某种方式将 useEffect 放入一个功能组件中，但是这一切都应该发生的地方变得有点复杂。任何人都可以帮助我理解这一点吗？

这是我遇到的错误。

React Hook "useEffect" is called in function "hoc" which is neither a React function component or a custom React Hook function

Answer 1

您的组件名称需要以大写字符开头，这就是您遇到此问题的原因。您还可以将连接和 hoc 代码优化为 return 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

useEffect 在高阶组件中调用

useEffect called in higher order component

reactjs

redux

higher-order-components