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

【问题标题】：React Hooks dafault state generate null instead of empty arrayReact Hooks 默认状态生成 null 而不是空数组
【发布时间】：2020-10-14 10:29:42
【问题描述】：

我使用 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')));
   }

剩下的就是回报..

【问题讨论】：

我相信您的代码中有竞争条件。你的两个效果一个接一个地运行，一个尝试get todos，另一个尝试set todos。
能否也提供return代码让我们了解更多？

标签： reactjs react-hooks use-state

【解决方案1】：

我认为问题出在：

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

检查存储在 localStorage 中键 'todos' 中的值

【讨论】：

你是对的，本地存储中的值为null。为什么将 null 设置为值而不是空数组？为了解决这个问题，我在 saveLocalStorage() 中输入了一个条件，如果 todos 状态为空，则本地存储中的“todos”将为 []，否则它将等于 todos 状态......不确定这是否是正确的方法。