Reactjs 为什么 useEffect 的初始化对于加载 localStorage 不起作用

参考资料: https://youtu.be/hQAHSlTtcmY?t=1342个

我遇到了一个问题，我无法从useEffect到localStorage初始化todos.将两个待办事项添加到列表中，然后单击浏览器刷新按钮后，所有待办事项将无法重新加载.跟踪信息如下所示:

storedTodos size:  2
App.js:41 todos size:  0
App.js:34 storedTodos size:  0
App.js:41 todos size:  0
App.js:41 todos size:  0

在我看来，setTodos(storedTodos)并没有像预期的那样工作.解决方案是通过useState加载初始化，如下所示.

Question&gt；有人能告诉我为什么这个初始化在useEffect以内不起作用吗？

谢谢

function App() {
  const [todos, setTodos] = useState([])
  // const [todos, setTodos] = useState(() => {
  //   if (localStorage.getItem(LOCAL_STORAGE_KEY)) {
  //     const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
  //     return storedTodos;
  //   }
  //   else
  //     return [];
  // })
  const todoNameRef = useRef()

  // This doesn't work as expected
  //
  useEffect(() => {
    const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
    
    if (storedTodos) {
      console.log("storedTodos size: ", storedTodos.length)
      setTodos(storedTodos)
    }
  }, [])

  useEffect(() => {
    console.log("todos size: ", todos.length)
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
  }, [todos])

  function handleAddTodo(e) {
    const name = todoNameRef.current.value
    if (name === '') return
    setTodos(prevTodos => {
      return [...prevTodos, { id: uuidv4(), name: name, complete: false }]
    })
    todoNameRef.current.value = null
  }

  return (
    <>
      <TodoList todos={todos} />
      <input ref={todoNameRef} type="text" />
      <button onClick={handleAddTodo}>Add Todo</button>
      <button>Clear Completed Todos</button>
      <div>0 left to do</div>
    </>
  )
}

export default App;