反应高阶组件 - 警告：无法从不同组件的函数体内更新组件

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);