React函数组件中导入函数内使用useState报错问题咨询

问题出在哪？违反了Hook的核心规则 #

你在ExampleFunction.js的模块顶层直接调用了useState，这完全踩中了React Hook的红线：

• Hook只能在React函数组件的顶层或者自定义Hook的顶层调用，绝对不能在普通函数、模块全局、循环、条件判断里调用。
• React依赖Hook的调用顺序来维护每个状态的对应关系，脱离组件上下文的Hook调用，React根本不知道该把状态挂到哪个组件上。

看你写的ExampleFunction.js：

import React, { useState } from 'react';
// 致命错误：这里的useState不在任何React组件的渲染流程里
const [Data, setData] = useState('replace with test');

const ExampleFunction = () => {
    setData('test');
}

export default ExampleFunction;

这里的useState脱离了组件的渲染上下文，React找不到对应的组件实例来绑定这个状态，直接就会抛出错误。

React Hook到底是怎么工作的？ #

React Hook的核心是绑定组件实例+依赖调用顺序：

• 当React渲染一个函数组件时，会为这个组件实例创建一个专属的Hook链表，每个useState（或其他Hook）调用都会在链表中生成一个节点，存储当前状态值和更新函数。
• 组件每次重新渲染，React都会按从上到下的顺序执行组件内的所有Hook调用，通过链表的顺序找到对应的状态节点，确保状态和组件的对应关系不混乱。
• 如果在组件外部调用Hook，React找不到对应的组件实例，没法构建这个Hook链表，自然就报错了。

正确的写法有哪几种？ #

1. 把函数写在组件内部，共享组件的Hook上下文 #

如果这个函数只给当前组件用，直接定义在组件内部就行，这样它就能直接访问组件里的状态和更新函数：

// Mainpage.js
import React, { useState } from 'react';

const Example = () => {
    const [data, setData] = useState('replace with test');

    const exampleFunction = () => {
        setData('test');
    };

    exampleFunction();    

    return (
        <>
            <button onClick={exampleFunction}>Click</button>
        </>
    )
};

2. 把状态更新函数作为参数传给外部函数 #

如果函数需要复用在多个组件里，把setData作为参数传进去就行：

// exampleFunction.js
export const exampleFunction = (setData) => {
    setData('test');
};

// Mainpage.js
import React, { useState } from 'react';
import { exampleFunction } from './exampleFunction';

const Example = () => {
    const [data, setData] = useState('replace with test');

    exampleFunction(setData);    

    return (
        <>
            <button onClick={() => exampleFunction(setData)}>Click</button>
        </>
    )
};

3. 封装成自定义Hook（需要复用状态逻辑时） #

如果你的函数需要自己管理状态，应该写成自定义Hook——自定义Hook就是以use开头的函数，里面可以调用其他Hook，而且只能在组件或其他自定义Hook里使用：

// useExampleHook.js
import { useState } from 'react';

export const useExampleHook = () => {
    const [data, setData] = useState('replace with test');

    const updateData = () => {
        setData('test');
    };

    return { data, updateData };
};

// Mainpage.js
import React from 'react';
import { useExampleHook } from './useExampleHook';

const Example = () => {
    const { updateData } = useExampleHook();

    updateData();    

    return (
        <>
            <button onClick={updateData}>Click</button>
        </>
    )
};

内容的提问来源于stack exchange，提问作者Josh Winters