错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一

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>