不知道应该怎么取名这个内容,遇到的问题让我的狗生倍感打击,感觉从来就没理解过react的编程机制。之前一直以为,只要我不setState那么我的数据就不会改变,以为props传到子组件的内容,除非回调函数改变它否则子组件是改不了props的,万万没想到,这些想法都是错误的。
一、搜索
先说一下搜索联动,就比如你的一个list里,你想根据名字搜索部分内容显示:
列表
类似图上,我在搜索输入相关内容时,本来是用下图这种方式改变了groupList,结果就间接的改变了groups导致再搜索整个list列表就变了删掉搜索关键字也不能恢复原样
错误代码
搜索后list内容丢失
这就是改变了对象的值,我们需要面对函数编程,改成以下即可:
正确代码示例1
正确代码示例2
二、props和state
我遇到的问题就是父组件给子组件传props,子组件把获得的props的值赋值给state。然后子组件修改了它的state,父组件的内容也变了。
这个问题其实和上面的本质都是一样的,我们只引用了地址,导致值改变会把多个地方都变了,下面上代码:
currentGroup是要传给子组件的参数
这里将currentGroup传到子组件
我在子组件里直接给state赋值了props里某个参数内的某个元素,然后修改这个state之后,发现props的内容也改了,导致父组件内容也发生了变化。其实这里就是因为我们只引用了这个地址,改变的时候所有引用这个地址的内容都发生了改变。
修改前
修改方法就是把引用值改成构造函数值,也就是map映射了一下,这样就ok啦
修改后