Question

我已经实现了useHistory（），与下面的实现相同，以前我没有得到任何错误，但是在这种情况下，我却得到了错误

第6:18行：在函数“ showPost”中调用React Hook“ useHistory”，该函数既不是React函数组件也不是自定义的React Hook函数react-hooks / rules-of-hooks

import React from 'react';
import CloseIcon from '@material-ui/icons/Close';
import {useHistory} from 'react-router-dom';

const showPost = () =>{
    let history = useHistory();

    const closeUpload = () =>{
        history.goBack();
    }

    return(
        <div className="overlay">
            <div className="overlay-container">
                <button className="close-btn" onClick = {closeUpload}><CloseIcon color="action"/></button>
                <h1>Hello</h1>
            </div>
        </div>
    );
}

export default showPost;

请帮我解决这个问题。预先谢谢你。

Answer 1

您始终应使用大写字母来调用React组件。

UPD： 来自https://reactjs.org/docs/components-and-props.html#rendering-a-component

注意：组件名称始终以大写字母开头。 React将以小写字母开头的组件视为DOM标签。例如，代表HTML div标签，但代表组件，并且要求Welcome位于范围内。

Answer 2

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

只需将组件大写

const showPost

收件人

const ShowPost

干得好

export default showPost

收件人

export default ShowPost

获取与反应挂钩useHistory相关的错误

2 个答案: