React调用useState提示所在函数非组件或自定义Hook是什么原因？

这个报错违反了React官方定义的Hook使用规则，具体触发原因有两个：

• 你的createFlight是普通函数，既不属于首字母大写的React函数组件，也不属于以use为前缀命名的自定义React Hook，不符合Hook的调用场景要求
• React函数组件需要返回合法的JSX结构，你当前的函数没有返回任何JSX内容，也不满足组件的定义要求

根据你的实际使用场景，可以选择以下任意一种修改方式：

方案1：封装为自定义Hook（适用于需要复用状态逻辑的场景） #

自定义Hook要求名称必须以use开头，修改后代码如下：

import { useState } from 'react'

// 自定义Hook名称前缀必须为use
function useCreateFlight(){
    const [flight, setFlight] = useState({
        flightNumber: "", 
        departureTime: "", 
        arrivalTime: "", 
        departureDate: "", 
        arrivalDate: "", 
        cabin: "", 
        economySeatsAvailable: "", 
        businessSeatsAvailable: "", 
        airport: "", 
        from: "", 
        to: "" 
    });
    // 可根据需求扩展修改flight的相关方法
    return [flight, setFlight]
}

export default useCreateFlight;

修改完成后可以在任意React函数组件的顶层正常调用这个Hook。

方案2：修改为React函数组件（适用于需要渲染UI的场景） #

React函数组件要求名称首字母大写，且必须返回JSX结构，修改后代码如下：

import { useState } from 'react'

// 组件名首字母必须大写
function CreateFlight(){
    const [flight, setFlight] = useState({
        flightNumber: "", 
        departureTime: "", 
        arrivalTime: "", 
        departureDate: "", 
        arrivalDate: "", 
        cabin: "", 
        economySeatsAvailable: "", 
        businessSeatsAvailable: "", 
        airport: "", 
        from: "", 
        to: "" 
    });
    // 此处替换为实际的组件UI逻辑
    return <div>航班创建表单</div>
}

export default CreateFlight;

方案3：改为普通工具函数（适用于不需要响应式状态的场景） #

如果你的函数只是用来生成初始航班对象，不需要响应式更新，完全不需要使用useState，直接返回普通对象即可：

function createFlight() {
    return {
        flightNumber: "", 
        departureTime: "", 
        arrivalTime: "", 
        departureDate: "", 
        arrivalDate: "", 
        cabin: "", 
        economySeatsAvailable: "", 
        businessSeatsAvailable: "", 
        airport: "", 
        from: "", 
        to: "" 
    }
}

export default createFlight;

内容的提问来源于stack exchange，提问作者Mariam Mostafa