A18.从零开始前后端react+flask - 修改前后端数据

一

点击“管理员”，出现修改图标，点击后会调用showUpdateDialog()函数。
修改HomePage.js中

    showUpdateDialog(item){
        if(item===undefined){
            //如果item未定义，则表示新增
            item = {};
        }
        // console.log(item); //可以通过它来打印查看item

        this.setState({
            //如果有数据，则把该条数据复制，显示在对话框中，可供修改
            showInfoDialog: true,
            editingItem: item, 
        });
    }

这时候点击“修改”，可以在F12的console下看到item内容了，但弹出modal中没有内容。需要如下修改：

二

在InfoDialog.js中，将文件末尾原来的代码：

const InfoDialogForm = Form.create({ 
    name: 'information_dialog'
})(InfoDialog);

export default InfoDialogForm;

修改为：

const objToForm = (obj)=>{
    let target = {}
    for(let [key,value] of Object.entries(obj)){
        target[key] = Form.createFormField({value});
    }
    // console.log("target",target);
    return target
}

//数据进行传递
const InfoDialogForm = Form.create({ 
    name: 'information_dialog',
    mapPropsToFields(props){
        if(!props.staff){
            return ;
        }
        return objToForm(props.staff);
    }
})(InfoDialog);

export default InfoDialogForm;

mapPropsToFields可以填写表单默认值。详情见 antd做form表单的组件共用，利用mapPropsToFields填写默认值

store中的值如何绑定到表单中呢？
mapPropsToFields方法会将store的值绑定到表单中，注意mapPropsToFields 里面返回的表单域数据必须使用 Form.createFormField 包装。

详情参考关于antd表单的双向绑定

此时点击修改后，在弹出的表单中已经有数据了。
在这里插入图片描述
题外话：
自己学习和尝试的过程中，这块内容走了不少弯路，始终不能正确得到该行的数据内容。
最终的原因竟然是在SqliteUtil.py文件中，少写了"id"，（正确的如下），导致提取不到对应行数据的id，因为没有id则系统将此过程当作新增，从而全部数据为空。（debug过程很痛苦。）

staffColumns = ("id", "service", "money", "card_number", "name", "phone", "project",\
                "shop_guide", "teacher", "financial", "remarks1", "collect_money", "remarks2")

三

修改后，点击“保存”，此时共用了新增的方法。
调用InfoDialog.js的handleOK()，将修改后的数据，用post方法请求ApiUtil.API_STAFF_UPDATE，对应于后端run.py文件中的updateStaff()函数。
实际上是修改SqliteUtil.py中的addOrUpdateStaff()函数，增加修改部分。
在if id == 0:后面增加另一种情况(conn.commit()之前)：

        else:
            #修改
            update = ''
            isFirst = True
            for key,value in staff.items():  #假如{"service":"1","money":"2"}
                if key=='id':
                    #这个字段不用考虑，隐藏的
                    continue
                if isFirst:
                    isFirst = False
                else:
                    update += ','  #相当于除了第一个，其他的都需要在最前面加','
                if value==None:
                    value = ""
                if isinstance(value, str):
                    update += (key + "='" + value + "'")
                else:
                    update += (key + "=" + str(value))
            #update: service='1',money='2'
            where = "where id=" + str(id)
            sql = "update t_staff set %s %s" % (update, where)
            # print("=="*30)
            print(sql) #update t_staff set service='1',money='2' where id='4'
            cursor.execute(sql)
            result = '更新成功'
            print(cursor.rowcount, result)