React待办事项列表应用id与value报错问题排查求助

错误原因 #

你遇到的Cannot read properties of undefined (reading 'id')报错，是两个问题导致的：

1. 添加元素传错参数：在addItem函数中，调用setItems时，你把原状态数组items放进了新数组，而不是刚创建的单个待办项。这会导致items数组里的元素变成嵌套数组，后续map遍历的时候，嵌套数组没有id和value属性，自然报错。
2. 变量拼写异常：你创建待办项时用了const ıtem = {...}，这里的ı是土耳其语的无点i，不是英文的i，虽然语法不报错，但容易引发混淆。

问题代码修正 #

1. 修正addItem里的setItems调用：

// 原错误代码
setItems(oldItems => [...oldItems, items])
// 修正后
setItems(oldItems => [...oldItems, item])

2. 把变量名改成标准英文拼写：

// 原错误代码
const ıtem = {
  id: Math.floor(Math.random()*1000),
  value: newItem
}
// 修正后
const item = {
  id: Math.floor(Math.random()*1000),
  value: newItem
}

完整修正代码 #

import React, {useState} from "react"

export default function HomeTemplate() {

  const [newItem, setNewItem] = useState("");
  const [items, setItems] = useState([]);

  function addItem() {

    if(!newItem) {
      alert("Enter a value!")
      return
    }

    const item = {
      id: Math.floor(Math.random()*1000),
      value: newItem
    }

    setItems(oldItems => [...oldItems, item])
    setNewItem("");
  }

  function deleteItem(id) {
    const newArray = items.filter(item => item.id !== id);
    setItems(newArray)
  }

  return (
    <div className="">
      
      <div>
        <h1>ToDo List</h1>
      </div>

      <div>
        <input type="text" placeholder="" value={newItem} onChange={e => setNewItem(e.target.value)}></input>

        <button onClick={() => addItem()}>Add</button>
      </div>

      <div>
        <ul>
          {items.map(item => {
            return(
              <li key={item.id}>{item.value} <button onClick={() => deleteItem(item.id)}>X</button></li>
            )
          })}
        </ul>
      </div>

    </div>
  )
}

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