React-解决组件异步传值

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

1、发生问题的场景

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

image.png

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

image.png

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

2、解决组件的异步传值

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

image.png

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

image.png

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