最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】reactjs中setState如何更新设置dict对象中某个key键的值

ReactJS crifan 480浏览 0评论
折腾:
【未解决】剧本编写系统中优化全部剧本列表页
期间,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
javascript – ReactJS – setState of Object key in Array – Stack Overflow
Change multiple key values at once, and setState in React · Issue #980 · facebook/immutable-js
this.key seems to always be undefined inside a React component · Issue #2429 · facebook/react
Iterating over properties of this.state React – General – The freeCodeCamp Forum
Reactjs – Using setState to update a single property on an object – General – The freeCodeCamp Forum
好像都只是:拿到当前dict对象值,然后更新后,再去setState
javascript – Modify parent component state with key value – Stack Overflow
reactjs – Correct way to remove key from react state – Stack Overflow
dictionary – React JS setState({dict : dict }) – Stack Overflow
【总结】
算了,就是按照上面的逻辑,代码优化为:
  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,
    })
设置新值即可。

转载请注明:在路上 » 【已解决】reactjs中setState如何更新设置dict对象中某个key键的值

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
86 queries in 0.155 seconds, using 20.52MB memory