SHINCHVEN'S HEXO

在React中异步设置组件的默认值

Count: 330Reading time: 1 min
2018/11/09 Share

前提

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

如何解决

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

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

React Component
1
class EditProduct extends React.PureComponent{
2
3
  render{
4
    const {product={}} = this.props.EditProductModel;
5
    return (
6
      <Checkbox defaultChecked={product.is_virtual===1}
7
                key={product.is_virtual ? 'is_virtual_loaded' : 'is_virtual_unloaded'}
8
      />
9
    );
10
  }
11
}
CATALOG
  1. 1. 前提
  2. 2. 如何解决