#Smart_Manager备忘录及各种难点汇总

Smart系列软件全部由React架构完成，React大致流程为：

service:<处理异步请求、调用异步处理>；

export async function query(params) {
    return request(`/api/CT/XXXX?${stringify(params)}`);
}

export async function getAllCTOptions(params) {
    return request('/api/CT/XXXX', {
        method: 'GET',
    });
}

export async function submit(params) {
    return request(`/api/CT/XXXX/`, {
        method: 'POST',
        body: {
            ...params,
        },
    });
}

effects:call、put、select<获取全局state>;

effects大致写法如下:

effects: {
        * fetch({payload}, {call, put}) {
            payload = Object.assign({}, payload, {UserID: getUserID()});
            let response = yield call(query, payload);
            yield put({
                type: 'save',
                payload: {
                    list: response.Content,
                    pagination: {
                        current:response.Page.PageCurr,
                        pageSize:response.Page.PageSize,
                        total:response.Page.ItemTotal,
                    },
                    deleteFlag: false
                },
            });
        },
}

effects中实现页面的跳转:

effects: {
        * Edit({payload}, {call, put}) {
            yield put(routerRedux.push(`/settlement/form/${payload.CTID}`));
        },
}

reducers:聚合产生当前model的state对象，<纯函数，只返回新的数据>，唯一可以改变state的地方，通过action传入的值与reducers中的值进行对比，产生一个新的state;

reducers大致写法如下:

reducers: {
   save(state, action) {
        return {
            ...state,
            ...action.payload,
        };
   },
},

action:<js对象>改变state的唯一办法，由dispatch函数调用一个action，改变对应的数据；

const {dispatch} = this.props;
 dispatch({
  type: 'exchange/fetch',
  payload: {Key:e},        //需要传给后台的数据
})

dispatch触发action，reduces描述如何改变state。

components:纯组件，可以复用，import引入所需页面中。

routes:页面一般的业务逻辑可以在这里处理，里面有多个components。

state:表示model的状态数据，通常表现为一个js对象。

1.如何根据后台的数据动态生成不同列的表格？

models中：

            if (response.Result) {
                //对汇率后台传来的数据进行特殊处理。
                let newData = [];
                let names = [];             //动态列名
                response.Content.map((item,index) => {
                    //获取列名
                    if(index == 0){
                        item.RateList.map(n=>names.push(n.Currency));
                    }
                    //根据数据,解析成页面所需要的数据格式<nd为固定出现的列数据>
                    let nd = {
                        key:index,
                        TotalMonthlyAccount: item.TotalMonthlyAccount,
                        MonthMark: `${item.YearMark}-${item.MonthMark.toString().padStart(2, '0')}`,
                    }
                    //根据列名生成对应的对象。
                    names.map(ns=>{
                        nd[ns] = item.RateList.filter(x => x.Currency == ns)[0].RateValue;
                    });
                    newData.push(nd);
                });
                yield put({
                    type: 'save',
                    payload: {
                        list: newData,
                        ColumnNames:names,        
                    },
                });
            } else {
                message.error(response.Content);
            }

routes中：

    CurrencyOpt(){
        let {exchange:{ColumnNames}} = this.props;
        let CurOption = [];
        if(ColumnNames){
            CurOption= ColumnNames.map(CurOpt=>{
                return(
                    {
                        title: CurOpt,
                        dataIndex: CurOpt,
                        key: CurOpt,
                        className: "editable",
                        render: (text, record) => {
                            return (
                                <Input
                                    value={text}
                                    onChange={e => this.handleFieldChange(e, CurOpt, record.key)}
                                    placeholder={CurOpt}
                                />
                            );
                        }
                    }
                )
            })
        }
        return CurOption;
    }

再在columns中添加如下代码:

...this.CurrencyOpt(),

2.如何根据后台的数据动态生成添加一行时的行数据？

    index = 0;
    // 添加一行<动态数据>
    handleAdd = () => {
        const newData = this.state.dataSource.map(item => ({...item}));
        //动态给定添加行的数据项
        const {exchange:{ColumnNames}} = this.props;
        let nd = {
                key: `NEW_TEMP_ID_${this.index}`,        //动态给定key
                TotalMonthlyAccount: false,
                MonthMark: nowDate,
        }
        ColumnNames.map(Names=>{
            nd[Names] = ``;
        })
        newData.push(nd);
        this.index += 1;
        this.setState({dataSource: newData});
    };

如何删除掉数组中多余的子数据？

delete newData.key;

componentDidMount方法:

//componentDidMount方法是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载
componentDidMount() {
   const {dispatch} = this.props;
     dispatch({
        type: 'project/Edit',
   })
}

componentWillReceiveProps方法:<尽量不要在componentWillReceiveProps方法中 dispatch ,否则会死循环！>

componentWillReceiveProps(nextProps) {
   const {city: {cityVO}} = nextProps;
       if (cityVO) {
          this.setState({ID: cityVO.ID});
    }
}

//每次监控props，如果是删除之后则需要重新获取数据。
    componentWillReceiveProps(nextProps){
        const {city} = nextProps;
        if(city.deleteFlag){
            const {dispatch} = this.props;
            dispatch({
                type: 'city/fetch',
            });
     }
}