---
title: "在React中异步设置组件的默认值"
date: 2018-11-09T10:57:15.000Z
author: Z.SHINCHVEN
tags: [React, diff, defaultChecked, Checkbox, Ant design]
canonical: https://atlassc.net/2018/11/09/load-default-value-asynchronously-in-react-component
---
## 前提

- 在开发一个编辑功能的页面时，我们经常需要异步加载页面和待编辑的数据对象；
- 如果表单控件先以空数据加载好控件再异步加载异步IO的数据对象，那么像Checkbox（from [antd](https://ant.design/index-cn)）这样的基于状态的图形控件则无法文本输入控件一样重新初始化值（defaultChecked）；
- 另外，如果将checked属性直接与数据对象的某个值绑定，会造成控件的状态无法变更问题，因为每次变更控件状态时，都会触发render函数，而如果render 每次执行都加载来自props（redux）数据对象，就会造成这个问题；

## 如何解决

我想到的办法是运用React diff策略来重新载相应的组件，这样像Checkbox组件的defaultChecked 就能在加载异步数据时被触发。 

具体的做法是就是判断异步数据有没有被加载上来，在未加载和已加载的时候给组件指定不同的key，这样就能触发React 的diff，重新加载组件。

```jsx
class EditProduct extends React.PureComponent{

  render(){
    const {product={}} = this.props.EditProductModel;
    return (
      <Checkbox defaultChecked={product.is_virtual===1}
                key={product.is_virtual ? 'is_virtual_loaded' : 'is_virtual_unloaded'}
      />
    );
  }
}
```