RN setState 采坑小记

项目中我们基本上一直使用这个小编,一般我们用来刷新数据(刷新页面),下面来小记下这个小坑

一般对页面来说 我们如是使用

第一种写法 声明、初始化分开

// 1、声明
export interface IState {
    bidBtnData: getBidButtonData,bidBean: IBidDetailInfo,}

export interface IProps extends IBasePageProp {

}

export default class extends UtilsRootPage<IProps,IState> {

//该方法 相当于constructor 初始化方法

  subPageInit() {

// 2、初始化
        this.state = {
            bidBean: {} as IBidDetailInfo,bidBtnData: {} as getBidButtonData,}

    }
// 3、赋值

    this.setState({ bidBean: response.data })

第二种写法 直接声明、初始化

export default class CheckBoxModalMenu extends React.Component<IProps> {
// 1、声明、初始化
    state = {
        modalVisible: false,data: [],bidderIdList: [],};
// 2、使用

  this.setState({ data: res.data.rows });

小坑小记：setState是异步操作 所以出现赋值异常时 用方法2解决

                                let oData: any = this.state.data;
                                let oNew: any = [];
                                oData.map((fItem: any) => {
                                    if (fItem.checkedflag) {
                                        oNew.push(fItem.userId);
                                    }  
                                });
                                // UtilsSuperCommon.logWarn(oNew);
                                // oNew始终有值 第一次bidderIdList取不到值 第二次才有 这是因为setState是异步操作 
                                // 所以用第二种写法 数据回来后再做操作
                                // 1、
                                // this.setState({
                                //     bidderIdList: oNew,
                                // }
                                //2、 该操作是异步操作 this.setState({ bidderIdList: oNew,},()=> { if (this.state.bidderIdList && this.state.bidderIdList.length) { this.setModalVisible(false); this.props.onClickDone(this,this.state.bidderIdList); } else { Toast.info(‘请选择中标人‘,1) } }) // UtilsSuperCommon.logWarn(this.state.bidderIdList);