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，您首先要获取包装的组件，然后返回一个函数，该函数接受道具并以某种方式返回涉及包装组件的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);

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

1 个答案: