React Todo组件报错Cannot read properties of undefined (reading 'map')如何解决

• 核心报错原因：clickHandler回调内的状态更新逻辑错误。你的初始todostate是包含todo、todoItem两个属性的对象，但调用setTodostate时直接传入了数组，直接覆盖了原有对象结构，后续读取todostate.todoItem时得到undefined，调用map方法就会抛出你遇到的错误。
• 次要逻辑问题：新增待办项时，你给新对象设置的存储待办内容的字段是todoItem，但渲染列表时读取的是item.name，字段不匹配会导致列表渲染出来的内容为空。

import React, {useState} from 'react'

let index = 0;

function Todo(){
  const [todostate, setTodostate] = useState({
    todo: '',
    todoItem:[]
  })

  const changeHandler =(e)=>{
    setTodostate({...todostate, todo: e.target.value })
  }

  const clickHandler =()=>{
    // 保持state的对象结构不变，只更新todoItem数组
    setTodostate({
      ...todostate,
      todo: '', // 新增后清空输入框的可选优化
      todoItem: [...todostate.todoItem, {id:index++, name: todostate.todo }]
    })
  }
  return(
    <>
       <h1>Todo List</h1>
       <input type="text" value={todostate.todo} onChange={changeHandler}  />
       <button onClick={clickHandler} >Add</button>
       <ul>
        {todostate.todoItem.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  )
}

export default Todo

内容的提问来源于stack exchange，提问作者Sayed Abdur Rahim