由于我的过滤函数 (filteredItems)，我在尝试更新新项目时收到以下错误。单击“添加项目”按钮并离开页面后，会出现此错误：

"Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')"

这是过滤函数所在的项目组件。

import React, {useState,useEffect} from 'react'
import PickupList from './PickupList'
import Search from './Search'
import UpdateItems from './UpdateItems'
import NewItem from './NewItem'

function Items(){

 const [items,setItems]=useState([])
 const [search, setSearch]=useState('')

 const itemURL = '/items/'

 useEffect(()=>{
        fetch(itemURL)
        .then(res => res.json())
        .then((allItems) => setItems(allItems))
        
 },[])

    const filteredItems = items.filter((item)=>item.bottle.toLowerCase().includes(search.toLowerCase()))
    
    console.log(items)

       return (
        <main>
         <UpdateItems setItems={setItems} />
         <NewItem items={items} setItems={setItems}/>
         <Search search={search} setSearch={setSearch}/>
         <PickupList allItems={filteredItems} />
        </main>
       )

}

export default Items

这是我的 NewItem 组件：

import React, {useState} from "react";


const startValue = {
  bottle: '',
  size: '',
  count: '',
}

function NewItem({setItems}) {


 const [newItem, setNewItem] = useState({
        bottle: '',
        size: '',
        count: '',
        
    })

 function handleChange(e){
        setNewItem((currentNewItem) => {
         return {
            ...currentNewItem,
            [e.target.name]: e.target.value,
            };
    })
    }


 function handleSubmit(e) {
    e.preventDefault()
    fetch('/items', {
    method:"POST",
    headers: {
    "Content-Type": "application/json",
    },
    body: JSON.stringify(newItem),
  })

  .then(res => res.json())
  .then(handleItems)

    
  }

  function handleItems(data) {
  setNewItem(startValue)
  setItems((currentItems) => [...currentItems,data])

  }

 return (
    <div className="new-item-form">
      <h2>New Item</h2>
      <form onSubmit = {handleSubmit}>
        <input
            type="text" 
            name="bottle" 
            value={newItem.bottle} 
            placeholder="Bottle type"
            onChange = {handleChange}
        />

        <input
            type="text" 
            name="size" 
            value ={newItem.size} 
            placeholder="Size"
            onChange = {handleChange}
         />

        <input 
            type="number"
            name="count"   
            step="0" 
            value = {newItem.count} 
            placeholder="Count" 
            onChange = {handleChange}
         />
            
        <button type="submit">Add Item</button>
      </form>
    </div>
  );
}

export default NewItem;