更新后,React 不再使用高阶组件 (HOC) 中的 useEffect
Hook 编译代码。我有一个 HOC,它连接到 Redux 存储并在需要时分派(dispatch)一个操作来获取数据。
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
最佳答案
您的组件名称需要以大写字符开头,这就是您遇到此问题的原因。您还可以优化连接和临时代码以返回临时实例一次,而不是一次又一次地执行
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
关于reactjs - useEffect 在高阶组件中调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58832843/