近期学到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