这段代码有什么问题？我的代码不起作用

【问题标题】：What is the problems in this code ? My code not working这段代码有什么问题？我的代码不起作用
【发布时间】：2021-11-08 09:21:44
【问题描述】：

请解决代码.. 代码无法正常工作。如何解决代码请帮助我，而不是地图方法。显示此消息.. 无法读取未定义的属性（读取“地图”）

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 =()=>{
    setTodostate([...todostate.todoItem, {id:index++, todoItem: 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

【问题讨论】：

你在谷歌上搜索错误发现了什么？

标签： reactjs

【解决方案1】：

这条线在几个方面不好：

setTodostate([...todostate.todoItem, {id:index++, todoItem: todostate.todo }])

第一次运行时，你会改变旧的状态

{todo: ' ', todoItem:[]}

进入这个新状态：

[[], {id:0, todoItem: ' '}]

那么下次运行时，新的状态会变成：

[' ', {id:1, todoItem: undefined }]

还有下一次：

[undefined, {id:2, todoItem: undefined }]

等等。

很难（如果不是不可能的话）弄清楚如何解决这个问题，因为你没有说出你真正想要代码做什么。 “请解决代码..代码无法正常工作”并不是特别有用。但我希望我的回答至少能告诉你你的代码有什么问题，并且能帮助你弄清楚如何解决这个问题。

【讨论】：