React中useEffect触发Cannot access 'todos' before initialization报错如何解决

报错原因 #

函数组件是严格按照从上到下的顺序逐行执行的，该报错的核心触发逻辑如下：

• 你将useEffect钩子写在了todos对应的useState声明之前，执行到useEffect代码段时，需要读取依赖数组中的todos变量
• const关键字声明的变量存在暂存死区（TDZ）：在变量的声明语句执行完成前访问该变量，会直接抛出ReferenceError
• 你的const [todos, setTodos] = useState([])声明在useEffect之后，所以useEffect执行时todos还未完成初始化，就触发了该报错。

修复方案 #

调整代码顺序，将所有useState状态声明统一放在useEffect、useCallback等其他钩子之前，符合React Hooks的使用规范。调整后的代码如下：

function App() {
    // 所有状态声明统一放在组件最顶部
    const [inputText,setInputText]=useState('');
    const [todos , setTodos] = useState([]);
    // 注意：依赖项中的status也需要提前声明对应的状态，否则后续会触发status未定义的报错
    // const [status, setStatus] = useState('')

    // 所有用到状态的钩子移到状态声明之后
    useEffect(() =>{
        filterHandler();
    },[todos, status]); 

    return (
        <div className="App">
            <header>
            <h1>Todo List</h1>
            </header>
            <Form 
                todos={todos} 
            />
        </div>
    )
}

额外规范说明：所有React Hooks都需要放在组件的最顶层，不要在条件判断、循环、嵌套函数中声明Hooks，所有钩子依赖的变量都需要确保在钩子声明前已经完成初始化。

内容的提问来源于stack exchange，提问作者Knowexx Ke