折腾:
【未解决】剧本编写系统中优化全部剧本列表页
期间,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, })
设置新值即可。