折腾:
【未解决】剧本编写系统中优化全部剧本列表页
期间,antd pro的reactjs中,需要去先后更新一个formValues的两个key:
group_id和author_id
代码目前是这样的:
updateGroupAndMember(functionGroupList) {
console.log("updateGroupAndMember: this", this)
const queryParamDict = this.generateQueryParamDict()
console.log(`before setFieldsValue queryParamDict=`, queryParamDict)
const curGroupId = queryParamDict.group_id
const curAuthorId = queryParamDict.author_id
console.log(`curGroupId=${curGroupId}, curAuthorId=${curAuthorId}`)
this.setState({
groupList: functionGroupList || [],
});
const { formValues } = this.state;
console.log(`formValues=`, formValues)
const newFormValues = {
group_id: curGroupId || "",
...formValues,
};
console.log(`newFormValues=`, newFormValues)
this.setState({
formValues: newFormValues,
});
if (curGroupId) {
// const curGroupIdInt = parseInt(curGroupId, 10)
// console.log("curGroupIdInt=", curGroupIdInt)
const curGroupMemberList = AllScriptList.getGroupMemberList(functionGroupList, curGroupId)
if (curGroupMemberList) {
console.log("set curGroupMemberList=", curGroupMemberList)
this.setState({
groupMemberList: curGroupMemberList,
});
if (curAuthorId) {
console.log("now to set curAuthorId=", curAuthorId)
const newAboveFormValues = {
author_id: curAuthorId || "",
...this.state.formValues,
};
console.log(`newAboveFormValues=`, newAboveFormValues)
this.setState({
formValues: newAboveFormValues,
})
console.log("updated newAboveFormValues=", newAboveFormValues)
}
}
}
}效率太低:
希望可以一次直接更新formValues中的某个key
对此问题之前貌似解决过,但是忘了怎么处理的了
reactjs setstate dict key
Reactjs – Using setState to update a single property on an object – General – The freeCodeCamp Forum
好像都只是:拿到当前dict对象值,然后更新后,再去setState
【总结】
算了,就是按照上面的逻辑,代码优化为:
updateGroupAndMember(functionGroupList) {
console.log("updateGroupAndMember: functionGroupList=", functionGroupList)
const queryParamDict = this.generateQueryParamDict()
console.log(`queryParamDict=`, queryParamDict)
this.setState({
groupList: functionGroupList || [],
})
if (queryParamDict.group_id) {
const curGroupMemberList = AllScriptList.getGroupMemberList(functionGroupList, queryParamDict.group_id)
console.log("curGroupMemberList=", curGroupMemberList)
this.setState({
groupMemberList: curGroupMemberList,
})
}
const curFormValues = this.state.formValues
console.log(`curFormValues=`, curFormValues)
if (queryParamDict.group_id) {
curFormValues.group_id = queryParamDict.group_id
}
if (queryParamDict.author_id) {
curFormValues.author_id = queryParamDict.author_id
}
console.log(`curFormValues=`, curFormValues)
this.setState({
formValues: curFormValues,
})
}其中是:
const curFormValues = this.state.formValues
console.log(`curFormValues=`, curFormValues)
if (queryParamDict.group_id) {
curFormValues.group_id = queryParamDict.group_id
}
if (queryParamDict.author_id) {
curFormValues.author_id = queryParamDict.author_id
}
console.log(`curFormValues=`, curFormValues)
this.setState({
formValues: curFormValues,
})就是用的前面的的逻辑:
对于formValues这个dict的对象来说,先去
const curFormValues = this.state.formValues
或得当前的值,根据情况去更新值
然后再去
this.setState({
formValues: curFormValues,
})设置新值即可。