React Hooks 默认状态生成 null 而不是空数组

Question

我使用 Hooks useState 作为默认状态，我使用一个空数组。问题仅在于 filteredList state，当我加载页面时，我的状态为 null 而不是空数组。如果我设置一个空对象或只是一个字符串，那么它会显示真正的默认状态，但如果我把一个带有值的数组放在那里，那么它首先记录正确的数组，然后变成一个空数组。奇怪的是我前几天写的时候还好好的，不知道是怪癖还是问题。。。这是我的代码：

export default function App() {
  const [inputText, setinputText] = useState("");
  const [todos, setTodos] = useState([]);
  const [filterStatus, setFilterStatus] = useState("all");
  const [filteredList, setFilteredList] = useState([]);

  useEffect(() => {
     getLocalTodos();
  }, [])

  useEffect(() => {
     filterHandler();
     saveLocalTodos();
  }, [todos, filterStatus]);

  const filterHandler = () => {
     switch (filterStatus) {
        case "completed":
           setFilteredList(todos.filter(todo => todo.completed === true));
           break;
        case "uncompleted":
           setFilteredList(todos.filter(todo => todo.completed === false));
           break;
        default:
           setFilteredList(todos);
           break;
        }
   }

   const saveLocalTodos = () => {
     localStorage.setItem('todos', JSON.stringify(todos));
   }

   const getLocalTodos = () => {
     setTodos(JSON.parse(localStorage.getItem('todos')));
   }

剩下的就是return..

Answer 1

我认为问题出在：

const getLocalTodos = () => {
  setTodos(JSON.parse(localStorage.getItem('todos')));
}

检查 localStorage

中键 'todos' 中存储的值

React Hooks 默认状态生成 null 而不是空数组

React Hooks dafault state generate null instead of empty array

reactjs

react-hooks

use-state