React应用报错TypeError: Cannot read properties of null (reading 'length')求助

这个错误的核心原因是**items初始值为null**，当你尝试访问null.length时自然会抛出该错误。

具体来说，你的代码里：

const [items, setItems] = useState(JSON.parse(localStorage.getItem('shoppinglist')));

当localStorage中没有shoppinglist这个存储项时，localStorage.getItem('shoppinglist')返回null，JSON.parse(null)的结果还是null，导致items的初始状态是null，而非预期的数组。

解决方法 #

直接给useState的初始值加一个空数组兜底，确保items始终是数组类型：

const [items, setItems] = useState(JSON.parse(localStorage.getItem('shoppinglist')) || []);

这样修改后，无论localStorage里有没有数据，items都会是数组（空数组或解析后的数组），访问items.length就不会报错了。同时，你的addItem、handleCheck、handleDelete函数里用到的数组方法（length、map、filter）也能正常执行，避免潜在的同类错误。

修改后的完整代码 #

import Header from './Header';
import AddItem from './AddItem';
import Content from './Content';
import Footer from './Footer';
import { useState } from 'react';

function App() {
  // 添加空数组兜底，确保items始终为数组类型
  const [items, setItems] = useState(JSON.parse(localStorage.getItem('shoppinglist')) || []);
  const [newItem, setNewItem] = useState('')
  const setAndSaveItems = (newItems) => {
    setItems(newItems);
    localStorage.setItem('shoppinglist', JSON.stringify(newItems));
  }

  const addItem = (item) => {
    const id = items.length ? items[items.length - 1].id + 1 : 1;
    const myNewItem = { id, checked: false, item };
    const listItems = [...items, myNewItem];
    setAndSaveItems(listItems);
  }

  const handleCheck = (id) => {
    const listItems = items.map((item) => item.id === id ? { ...item, checked: !item.checked } : item);
    setAndSaveItems(listItems);
  }

  const handleDelete = (id) => {
    const listItems = items.filter((item) => item.id !== id);
    setAndSaveItems(listItems);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!newItem) return;
    addItem(newItem);
    setNewItem('');
  }

  return (
    <div className="App">
      <Header title="Grocery List" />
      <AddItem
        newItem={newItem}
        setNewItem={setNewItem}
        handleSubmit={handleSubmit}
      />
      <Content
        items={items} {/* 补充传递items给Content组件，否则无法渲染列表数据 */}
        handleCheck={handleCheck}
        handleDelete={handleDelete}
      />
      <Footer length={items.length} />
    </div>
  );
}

export default App;

注：代码中补充了items={items}传递给Content组件，这是因为Content需要列表数据才能渲染内容，如果你的Content组件已有其他获取items的方式，可以忽略这一修改。

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