折腾：
【未解决】剧本编写系统中优化全部剧本列表页
期间，antd pro的reactjs中，需要去先后更新一个formValues的两个key：
group_id和author_id
代码目前是这样的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 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
【总结】
算了，就是按照上面的逻辑，代码优化为：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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, }) } |
其中是：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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
或得当前的值，根据情况去更新值
然后再去
1 2 3 | this.setState({ formValues: curFormValues, }) |
设置新值即可。