React Hook “useState” é chamado na função “deviceStatus” que não é um componente da função React ou um React customizado

Question

Eu sou novo para reagir ganchos e componentes funcionais, estou tentando usar o usuário useState dentro do meu componente funcional, mostrando-me o erro conforme menciona

Usando React, design de formiga

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

Referência seguida, insira a descrição do link aqui

Erro:

React Hook "useState" é chamado na função "deviceStatus" que não é um componente da função React nem uma função React Hook customizada react-hooks / rules-of-hooks

Answer 1

Este problema é causado porque o React lê o componente funcional com o caso Pascal. Então, tente mudar sua função e nome de arquivo paraDeviceStatus