react + ant.design 开发遇到的bug和难题总结

 

1.

react + ant.design  中 使用getFieldDecorator

可以这样使用默认值：

this.props.form.setFieldsValue({

    realName: response.data.data.realname,

    phoneVal: response.data.data.mobile,

    mailVal:response.data.data.email,

});

不建议使用：

initialValue: rolename,

因为修改默认值之后不会变化

2.

三目法操作样式

style={{visibility: this.state.selectNum.length >0  ? 'visible' : 'hidden'}}

3.

arr是在state中设置的[]；

判断随着arr的长度来展示select的内容

可以使用以下方法：

{this.state.arr.length > 0 &&

    <div id="areaImei">

        <Select

            mode="multiple"

            style={{ width: 300 }}

            onSelect={this.handleEquipmentChange}

            placeholder="输入或选择设备的IMEI"

            onDeselect={this.onDeselect}

            defaultValue={arr}

            onFocus={this.onFocus}

            onChange={this.handleChangeImei}

            getPopupContainer={() => document.getElementById('areaImei')}

        >

            {children}

        </Select>

    </div>

}

{this.state.arr.length <= 0 &&

<div id="areaImei">

    <Select

        mode="multiple"

        style={{ width: 300 }}

        onSelect={this.handleEquipmentChange}

        placeholder="输入或选择设备的IMEI"

        onDeselect={this.onDeselect}

        onFocus={this.onFocus}

        onChange={this.handleChangeImei}

        getPopupContainer={() => document.getElementById('areaImei')}

    >

        {children}

    </Select>

</div>

}

4.

判断两个数组的内容是否相同

equar = (a, b) => {

    // 判断数组的长度

    if (a.length !== b.length) {

        this.showModal();

        return false;

    } else {

        // 循环遍历数组的值进行比较

        for (let i = 0; i < a.length; i++) {

            if (a[i] !== b[i]) {

                this.showModal();

                return false;

            }

        }

    }

    return true;

};

5.

去掉不符合规则的项

arr.filter(item => item.index !== temp_val)

6.

socket  

 package.json

"sockjs-client": "^1.3.0",

"stompjs": "^2.3.3",

引入：（重点！！！）

import SockJS from 'sockjs-client'

import Stomp from ‘stompjs'

 

刷新页面的时候，会更新当前session_id的值；

所以：react 中需要在componentDidMount每个方法里再次执行链接