ReactJs中useEffect无法更新局部变量问题求助

为什么你的代码不生效？ #

你用let声明的accountTypes是普通局部变量，React不会追踪它的变化。就算在useEffect里修改了它的值，组件也不会触发重新渲染，所以外部的console.log和传给Form的还是初始的空数组。

正确的写法：用React状态管理变量 #

React中需要用useState来声明需要追踪变化的变量，这样当变量更新时，组件会自动重新渲染，确保UI和数据同步。修改后的代码如下：

import { useState, useEffect } from 'react'; // 别忘了导入useState

export default () => {
    // 用useState声明状态，初始值为空数组
    const [accountTypes, setAccountTypes] = useState<Array<Object>>([]);

    useEffect(() => {
        // 用setAccountTypes更新状态
        setAccountTypes([
            {
                value: 1,
                label: 'Developer',
            },
            {
                value: 2,
                label: 'Personal',
            },
            {
                value: 3,
                label: 'Professional',
            },
        ]);
    }, []); // 空依赖数组表示仅在组件首次渲染时执行

    console.log(accountTypes); // 现在会打印更新后的值

    return (
        <Form accountTypes={accountTypes}>
           ...
        </Form>
    )
};

关键点说明 #

• useState会返回一个状态变量和一个更新函数，只有通过更新函数（这里是setAccountTypes）修改状态，React才会感知到变化并重新渲染组件。
• 普通局部变量的修改不会触发组件重新渲染，所以无法同步到UI上。
• 你的场景是模拟API请求，把数据赋值逻辑放在useEffect（空依赖）里是正确的，对应真实场景中在这个位置调用API获取数据。

内容的提问来源于stack exchange，提问作者Mr.Singh