React Gatsby中的UseState Hooks

Question

import React, {useState} from 'react'
import Layout from "../components/layout"

const blog = () => {
    const [state, setState] = useState({
        name: 'Kerry',
        age: 20
    });
    return (
        <Layout>
        <div>
            <h1>blog</h1>
            <p>Post will show up here later on</p>
            {state.name + state.age}
            
        </div>
        </Layout>
    )
}

export default blog

你好，我正在尝试从state中打印出姓名。 我正在使用React Hooks，这个项目是使用Gatsby命令构建的。 根据我的理解，{state.name + state.age} 这行代码应该返回我的姓名和年龄。

但程序终端返回“重建失败”。

同时，该程序还给我2个错误。

以下是这两个错误：

5:19  warning  'setState' is assigned a value but never used no-unused-vars

 5:31  error    React Hook "useState" is called in function "blog" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

那么，我使用useState有问题吗？

- Khant

---

React组件必须大写。将“blog”更改为“Blog”。 - Ross Allen

请参阅 https://reactjs.org/docs/jsx-in-depth.html#:~:text=User%2DDefined%20Components%20Must%20Be,Foo%20%2F%3E%20compile%20to%20React 了解有关用户定义组件和JSX的更多信息。 - Nishant

Answer 1

组件必须以大写字母开头。您需要将blog更改为Blog。其余的代码似乎正确。

这是因为如果它们以小写字母开头，React将其解释为内置组件，例如<p>或<img>。由于它们被传递给React.createElement，它会破坏您的代码。

您可以在React的官方文档中查找更多信息。

- Ferran Buireu