react的ui库antd中form表单使用SelectTree 的反显问题

react的ui库antd中form表单使用SelectTree 的反显问题

最近遇到这个问题，后来找到原因。

1.formItem 需要使用initialValue赋值。
2.这个组件需要一开始就存在不能是条件渲染，非要用条件渲染需要让它先显示，然后根据条件让它不显示。

例子

state={
 treeList:[],
 showTree:ture,
 value:[]
}
componentDidMount(){
   //这里请求数据用定时器代替
   setTimeOut(()=>{  //一般会先拿到listTree先渲染
      this.setState({
        treeList:[{value:'aaa',title:'你好react'}]
      })
      setTimeOut(()=>{ //第二次请求反显的值和是否显示
         if(需要显示tree){ //下面俩条if一般不会有同时出现的时候
             this.setState({
               value:['aaa'],  
             }) 
         }
         if(不需要显示tree){
            this.setState({
               showTree:false,  
             }) 
         }
        
      })
   },2000)
}
 render() {
    const {treeList,value,showTree}=this.state;
    const tProps = {
      treeData:treeList,
      value:value
    };
    return 
    <Form>
      <Form.Item>
          {getFieldDecorator('selectTree', {
            initialValue:[]
          })(
             {showTree&&<TreeSelect {...tProps} />}
          )}
        </Form.Item>
     </Form>
     
  }

如果帮到了你请给个赞，感谢！！