React-解决组件异步传值

初学React发现组件在异步传值时出现子组件在第一次接收不到父组件传递过来的值,这也导致了子组件无法正常的渲染页面。

1、发生问题的场景

当访问服务器数据或者进行某些耗时操作时父组件给子组件传值为空。
比如:


image.png

我想在拿到服务器数据后把数据后把data赋值给state里面的detail。


image.png

然后在组件通过访问state里的detail数据把值传递给父组件,这样一来放服务器在还没获取到数据时父组件已经向子组件传递了一次空的值,导致子组件渲染时没数据报错。因为这个过程时异步的,也被称为组件的异步传值。

2、解决组件的异步传值

有个方法是在子组件渲染时做一次if判断当接收到的数据不为空的时候再去渲染页面,因为父组件会一直向子组件传递参数,所以第一次传递为空,就不去渲染页面第二次传递有数据了再去渲染。这个方法我没试总感觉哪里会出现问题,比如在第二次传递时有数据了开始渲染但是数据没有传递完,还会导致报错。
在解决这个问题的时候无意间发现一个方法,不知道这个方法有没有BUG,也欢迎大佬指出这个方法的不当之处。
同样访问完服务器时把数据赋值给state里的detail。


image.png

然后在进行传参的时候做一个手脚,不直接去访问state里的detail值,而是去遍历这个detail,然后把每一项传递给子组件。


image.png

这个方法时无意间发现的也不知道具体原理是什么,知道的大佬欢迎留言

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,860评论 25 709
  • ariv14 . 即景 傍晚妩媚耀眼阳光 急急落下阵太阳雨 彩虹间 六尺以上向左 是天堂 你住的心房 紧闭霓虹双眸...
    轩辕14阅读 222评论 0 0
  • 俗话说,每逢佳节胖三斤,春节刚过,小编也发现努力了一年的马甲线渐渐的不见了,取而代之的是一圈萌萌的游泳圈。因为小编...
    搬砖小仙女阅读 1,023评论 3 5
  • 到利泽的中坝去谈一场恋爱 与心爱的人一起 在江边看晨曦赏落日 听江水轻吟爱之歌 柔柔的芦苇会起舞作伴 多情的鹅卵石...
    如歌的行板紫雪阅读 1,005评论 3 5
  • 总想把悲伤的情感通通省略,沉醉于唐诗宋韵如清莲般纯洁。赏一番岁月静好年轻的季节,花开绚烂叶绿无缺。然而多年以后却开...
    柯柯西里阅读 545评论 0 2