美文网首页
小王遇坑——关于搜索联动和props与state

小王遇坑——关于搜索联动和props与state

作者: 按时吃饭_63fb | 来源:发表于2019-05-17 17:47 被阅读0次

不知道应该怎么取名这个内容,遇到的问题让我的狗生倍感打击,感觉从来就没理解过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啦

修改后

相关文章

  • 小王遇坑——关于搜索联动和props与state

    不知道应该怎么取名这个内容,遇到的问题让我的狗生倍感打击,感觉从来就没理解过react的编程机制。之前一直以为,只...

  • 深度理解React底层实现原理

    索引: props, state与render函数关系 – 数据和页面是如何实现互相联动的? React中的虚拟D...

  • ReactNative面试(1)

    1.props和state的区别? 现在我们来总结下,props与state的区别: props是指组件间传递的一...

  • React基础(5) -- Props

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就...

  • React Props

    state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就...

  • react 数据操作

    state 与 props 的相同之处 改变都会触发render函数(UI改变) state 与props 的不同...

  • ReactNative开发-props与state的区别与理解

    props与state 通俗理解:一个只可读(props),一个可读可写(state) 什么是props? pro...

  • React props

    React Props state 和 props 主要的区别在于 props 是不可变的,而 state 可以根...

  • React入门

    组件接收参数,通过render渲染视图 State 与 Props 区别 props 是组件对外的接口,state...

  • React中的props和state

    props和state this.props 由 React 本身设定, 而 this.state 具有特殊的含义...

网友评论

      本文标题:小王遇坑——关于搜索联动和props与state

      本文链接:https://www.haomeiwen.com/subject/pkcoaqtx.html