vue出现Error in render: “TypeError: Cannot read properties of undefined (reading ‘id‘)“的原因

学习Vue框架的时候，遇到这个报错：

案例：记事本 (1.0版本)

1. 模型：


2. 初始版本

      学习Vue组件化的时候，有一个知识点是状态提升，当兄弟组件之间要进行通信的时候，有要操作的相关的数据的时候，将这些数据提升到共同的父容器中，以便进行操作。
      当在 TodoInput 组件里面新增数据的时候，需要如图所示，经过App.vue这个父容器才能成功传递数据：

      而这样传递，数据可以传递成功，但是TodoItem 组件不知道在何时才接收数据并创建新的组件，因为方法需要调用才能执行，而这样直接传送数据过来没办法触发事件就不能调用方法，就达不到新增数据的效果。
      所以要进行状态提升，将原本存储在TodoList 组件里面用于渲染TodoItem组件的数据提升到App组件中，这样TodoInput 可以直接将数据传递到App.vue中进行存储，TodoList 组件利用props从App组件中读取数据，TodoItem从TodoList中读取数据进行渲染。

3. 所遇问题
      报错说TodoItem组件中找不到 id这个属性(其实下面的title 和completed 属性都找不到，只是从 id 开始报错)。

    TodoItem.vue:

既然找不到，当前接收数据的内容没有什么问题，就往前回溯，是否数据传输正确

仍旧没问题，再往前滚：
问题就出在这里，在父容器中直接调用了TodoItem组件，而TodoItem组件是在TodoList组件中，获取到数据后再进行渲染。而一开始TodoItem组件里面本来就没有数据，肯定找不到各种属性。

将App容器中将TodoItem组件的内容删掉就不会报错了：