我已经在我的 React 网页中导入了 useState 但它仍然显示编译错误答案

【问题标题】：I have already imported useState in my React webpage but it is still showing compilation error我已经在我的 React 网页中导入了 useState 但它仍然显示编译错误
【发布时间】：2021-05-29 09:45:41
【问题描述】：

我已经导入了useState，但它仍然显示编译错误。

我的网页名称是 CreatePost.js

import React, { useState } from 'react';

const createPost = () => {

    /* We will use the 'useState' hooks to get the value from the text fields. */
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    const [image, setImage] = useState("");

    
    const postDetails = () => {

        const data = new FormData();
        data.append("file", image);
        data.append("upload_preset", "insta-clone");
        data.append("cloud_name", "rishavsinghh-cloud");
        fetch("https://api.cloudinary.com/v1_1/rishavsinghh-cloud/image/upload", {
            method: "post",
            body: data
        }).then(res => res.json()).then(data => {
            console.log(data);
        }).catch(err => {
            console.log(err);
        });
    }

    return (
        <div className="card auth-card input-field" style={{ maxWidth:"500px", padding: "20px" }}>
            <h2 className="cardHeading">Create Post</h2>

            <input type="text" placeholder="Title" value={title} onChange={(event) => setTitle(event.target.value)} />

            <input type="text" placeholder="Body" value={body} onChange={(event) => setBody(event.target.value)} />

            <div className="file-field input-field">
                <div className="btn">
                    <span>Upload Image <i class="fa fa-upload"></i></span>
                    <input type="file" value={image} onChange={(event) => setImage(event.target.files[0])} />
                </div>
                <div className="file-path-wrapper">
                    <input className="file-path validate" type="text" placeholder="Upload image" />
                </div>
            </div>
            <button class="btn waves-effect waves-light #64b5f6 blue darken-1" onClick={ () => postDetails() } >Create Post <i class="fa fa-pencil"></i></button>
        </div>
    );
}

export default createPost;

我得到的错误是：-

【问题讨论】：

欢迎来到 Stack Overflow！请带上tour，环顾四周，并通读help center，尤其是How do I ask a good question? 请张贴代码、错误消息、标记和其他文本信息作为文本，而不是作为图片的文字。原因：meta.stackoverflow.com/q/285551/157247 如果您收到错误消息，请使用复制和粘贴将错误的文本粘贴到问题中。

标签： javascript node.js reactjs react-hooks use-state

【解决方案1】：

只需将您的组件名称从 createPost 更改为 CreatePost。因为在 react 组件名称应该以大写字母开头。

【讨论】：

【解决方案2】：

更改组件名称大写，像这样CreatePost

https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type

【讨论】：

【解决方案3】：

组件名大写

const CreatePost = () => {
//everything else
}
export default CreatePost

【讨论】：

【解决方案4】：

组件名称大写是 React 中的一项要求，因此您需要将 createPost 更改为 CreatePost 并且应该修复错误。

来自 ReactJs 文档的更多信息：(https://reactjs.org/docs/components-and-props.html)

React 将以小写字母开头的组件视为 DOM 标签。例如，表示一个 HTML div 标签，但是表示一个组件，并且需要 Welcome 在范围内。

【讨论】：

【解决方案5】：

此编译错误是由于组件名称大写造成的。将组件名称从 createPost 重命名为 CreatePost。此外，请确保您的文件名应与组件名称具有相同的格式。

例如：

CreatePost.js

【讨论】：