React高阶组件-警告:无法从其他组件的函数体内部更新组件

Question

我制作了一个非常简单的高阶组件，它从API端点获取数据，并显示加载微调器、失败时的错误消息或成功时的组件。

该组件工作正常，但我收到以下错误消息：

Warning: Cannot update a component from inside the function body of a different component. in Unknown (at ApiData.tsx:34)<--此行：ok: value => <WrappedComponent data={value} />

从阅读类似的帖子中，我发现React可能有点过于热衷于显示这条消息。我使用的是一个完全不可变的Redux存储，不使用任何非功能组件。我担心，因为我收到了这个警告，如果我以后尝试扩展这个组件(比如说，通过每隔一段时间自动刷新API(，更新将无法正常启动。此外，这是一个警告信息——我们应该注意；(

以下是HOC 的代码

import React, { ComponentType } from 'react'
import { IResult } from 'typescript-monads'
import { useDispatch } from '../../store'
import { PayloadActionCreator } from 'typesafe-actions'
import { Preloader, PreloaderSize } from 'react-materialize'
import styles from './ApiData.module.scss'
interface ApiProps<TKey, TData> {
key: TKey
data?: IResult<TData, Error> | "loading"
get: { request: PayloadActionCreator<string, TKey> }
loaderSize?: PreloaderSize | "inline"
}
export interface DataProps<TData> {
data: TData
}
export default <TKey, TData>({ key, data, get, loaderSize }: ApiProps<TKey, TData>) =>
(WrappedComponent: ComponentType<DataProps<TData>>) => {
const dispatch = useDispatch()
if (!data) {
dispatch(get.request(key))
return <span>&nbsp;</span>
} else if (data === "loading") {
if (!loaderSize || loaderSize === "inline") {
return <span><Preloader className={styles.preloader} /></span>
} else {
return <Preloader size={loaderSize} />
}
} else {
return data.match({
fail: error => <span>An error occurred: {error.message}</span>,
ok: value => <WrappedComponent data={value} />
})
}
}

下面是一个如何使用的例子：

const somePart = ApiData<SomeObjectKey, SomeObject>({...})
...
return <div>{somePart(SomeComponent)}</div>

有人能建议为什么提出此警告，以及如何删除/解决吗？非常感谢。

编辑：有人认为data.match可能有问题——我也尝试了以下操作，但它仍然错误：

if (data.isFail()) {
return <span>An error occurred: {data.unwrapFail()}</span>
} else {
return <WrappedComponent data={data.unwrap()} />
}

Answer 1

我注意到您的参数顺序可能不正确。通常，对于HOC，您希望首先获取封装的组件，然后返回一个函数，该函数以某种方式获取包含封装组件的props并返回JSX。

// next two lines have been swapped
export default (WrappedComponent: ComponentType<DataProps<TData>>) => { 
return ({ key, data, get, loaderSize }: ApiProps<TKey, TData>) => {
const dispatch = useDispatch()
if (!data) {
dispatch(get.request(key))
return <span>&nbsp;</span>
} else if (data === "loading") {
if (!loaderSize || loaderSize === "inline") {
return <span><Preloader className={styles.preloader} /></span>
} else {
return <Preloader size={loaderSize} />
}
} else {
if (data.isFail()) {
return <span>An error occurred: {data.unwrapFail()}</span>
} else {
return <WrappedComponent data={data.unwrap()} />
}
}
}
}

现在你可以这样使用你的HOC：

import HOC from "./hoc-file"
function OriginalComponent(/* ... */) { /* ... */ }
const WrappedComponent = HOC(OriginalComponent);
ReactDOM.render(<WrappedComponent {...props} />, rootDomElement);