试图制作一个显示 JSON 待办事项数据的 React 待办事项列表，并允许您添加新的待办事项，但同时删除所有页面内容，我该如何解决这个问题？

Question

每次用户尝试添加新的待办事项时，都会添加一个空白 li。

如果我删除标签，并取消注释 ToDoForm.jsx 中的 map function，用户可以添加一个非空白的新 li。 我不知道如何使两者都起作用

https://i.stack.imgur.com/312tD.png

这是代码： https://replit.com/@justinablair3/React-todo-app?v=1

Answer 1

您的类型不匹配。 当你添加一个新的时，你并不是在添加一个新的 object，而是在数组中添加一个新的字符串。 这就是 output 为空的原因。 您的 TodoList 组件正在寻找标题并已完成，但没有收到新项目的标题。 注销待办事项，添加新的待办事项后，您会看到数组看起来像 ['NewItem", {...}, {...}]。

改变

setTodos([input, ...todos])

像这样：

setTodos([{title: input, id: Math.random(), completed: true}, ...todos])

这样孩子就会知道这是一个 object 而不是字符串。