React添加新Item跳转页面后出现toLowerCase读取undefined错误

点击“Add Item”按钮并跳转页面后，出现如下报错：

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

相关代码 #

Items组件代码 #

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;

问题原因与解决方案 #

原因分析 #

报错核心是item.bottle为undefined，调用toLowerCase()时触发类型错误。可能的场景：

• 后端处理POST请求后，返回的新增item数据中缺少bottle字段
• 新增item时表单提交的数据异常，导致bottle字段未正确传递
• filter函数未做防御性判断，直接访问可能不存在的属性

解决方案 #

1. 给filter函数添加防御性检查
   使用可选链操作符?.，避免在item.bottle为undefined时调用方法：

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

如果环境不支持可选链，也可以用条件判断替代：

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

2. 验证后端返回数据
   在handleItems函数中打印返回的data，确认是否包含bottle字段：

function handleItems(data) {
  console.log('新增的item数据:', data)
  setNewItem(startValue)
  setItems((currentItems) => [...currentItems,data])
}

如果后端返回数据缺少bottle，需要调整后端逻辑，确保返回完整的新增条目信息。

3. 表单提交前验证必填字段
   在handleSubmit中添加校验，避免提交空的bottle值：

function handleSubmit(e) {
  e.preventDefault()
  if (!newItem.bottle.trim()) {
    alert('请填写瓶型')
    return
  }
  // 后续fetch请求代码
}

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