错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生

Question

在下面，您将看到最简单的使用钩子呈现功能组件的组件。

 import React, { Component, useState } from 'react'

    export default class ImageList extends Component {
        render() {
            return (
                <div>
                    {RenderImages()}
                </div>
            )
        }
    }

    export const RenderImages = (props) =>
    {
        const [images,setImages] = useState([])
        return(
            <div>
                Images will be rendered here!
            </div>
        )
    }

已搜索，但找不到解决方案...为什么不起作用？这里的钩子有什么问题？

Answer 1

<div>
   {RenderImages()}
</div>

您已经将RenderImages称为函数，并且由于使用了Hook而感到困惑。如果您像这样使用它，它将在使用时将RenderImages作为功能组件使用。

<div>
   <RenderImages />
</div>

Answer 2

https://reactjs.org/docs/hooks-rules.html

  

请勿在循环，条件或嵌套函数中调用Hook。相反，请始终在React函数的顶层使用挂钩。