在学习React的过程中，作者完成了两个小项目——任务清单应用。在开发中遇到了组件间传值、错误处理和数据操作等问题。通过props和refs进行组件间通信，但遇到警告，需为列表元素设置唯一key。在数据处理时，错误地传递了整个对象而不是其值。作者还尝试了使用Context API简化传值，但仍需解决对象传值的问题。这两个项目帮助作者理解了React中数据处理和错误排查的重要性。
近期学到React到一阶段,写了两个小项目
需求:task 今日任务清单
1)添加任务
2)删除任务
首先再写demo1时,通过props进行各个组件间传值,在通过refs进行子传父的input中value值.父组件传值孙子组件要用,那么儿子组件也需要写,写的地方比较多.遇到的比较多的问题如下
警告:列表中的每个子元素都应该有一个唯一的“键”道具。
这个错误应该再每次生成重复元素(li...)传入key={}作为唯一值
未捕获错误:对象作为React子对象无效(发现:带有键{key, index, value, time, handleDelete}的对象)。如果您想呈现一组子元素，请使用数组。
这个错误一般是传入的数据或者对象解析时错误,本应该是对象中的某个值,结果传入了整个对象导致错误.
demo1
在数据定义以及数据读取,解析错误连连,费了一番功夫.
demo1 数据定义
demo1 开始 传值,解析,渲染
demo1 点击添加按钮后 解析数据库,取值(ref.current.value),添加到数据库,重新渲染
demo2
在demo2中使用了Context传值,传值一次,无限复用,并且所有下层组件都可以用,很赞!
input中的新值依然通过refs传值
组件外部定义并创建context以及数据库tasks
组件内部解构取值外部数据库tasks
Provider发布值 (注意:传的值要以对象写在value中. ) 重复调用的要写key
最低0.47元/天 解锁文章
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
