在函数“deviceStatus”中调用React钩子“useState”，该函数既不是React函数组件，也不是自定义React

Question

我不熟悉react钩子和功能组件，我正在尝试在我的功能组件中使用useState，它会向我显示前面提到的错误

使用React、ant设计

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './device-status.css'

import { Checkbox, Switch } from "antd";

function deviceStatus() {

    const [isEnabled, setIsEnabled] = useState(false)

    const toggleSwitch = (checked) => {
        console.log(checked);

        setIsEnabled(checked)
    }
   return (
         <div className="devicestatus-item" >
              <span>Front Low Light :</span>
               <Switch checked={isEnabled} onChange={toggleSwitch} />
          </div>
    )
}
export default deviceStatus

参考以下输入链接描述在这里

错误：

在函数“deviceStatus”中调用React钩子“useState”，该函数既不是React函数组件，也不是自定义React钩子函数React钩子/钩子规则

Answer 1

导致此问题的原因是React读取带有Pascal大小写的功能组件。因此，请尝试将函数和文件名更改为DeviceStatus