鍍金池/ 問答/C  HTML/ 關(guān)于React state中數(shù)組的更新問題

關(guān)于React state中數(shù)組的更新問題

問題描述

我一直以為React中state的修改必須用setState函數(shù)修改,但是下面代碼中第一個(gè)直接state中數(shù)組進(jìn)行push,也修改了state,不知道原因。

相關(guān)代碼

  //點(diǎn)擊提交
  onClick() {
    //創(chuàng)建新的評論
    let newComment = {
      content: this.state.comment,
      date: dayjs().format("YYYY/MM/DD HH:mm:ss"),
      id: Date.now()
    } 
    //a 將評論添加到評論列表
    this.state.commentList.push(newComment)
    
    //b
    // this.setState({
    //   commentList: [newComment,...this.state.commentList]
    // })

    //c 將評論框清空
    this.setState({
      comment:''
    })
  }

a+c或b+c或c(c調(diào)到前面)+a 代碼效果都是正常的,感覺有點(diǎn)像事務(wù)控制了,調(diào)用了setState函數(shù),就會完成state修改同步,不管setState內(nèi)傳遞了什么參數(shù)。

  this.state.comment=''
    this.setState({
    })

這段代碼也正常清空comment。

回答
編輯回答
雨蝶

setState中很重要的三個(gè)功能是:

  1. 合并state
  2. 觸發(fā)調(diào)和算法和render
  3. 批量更新

而且并不是說只有setState才可以改變state。

2017年11月9日 04:19
編輯回答
護(hù)她命

正直清空comment的值是this.state.comment=''這句代碼。
this.setState({})這句代碼不起任何作用。

原因得從內(nèi)存說起。
state在組件中以object的形式存在,你可以理解為this.state指向了存放state的那片區(qū)域,并不是state本身。
當(dāng)你執(zhí)行this.state.xxx = yyyy的時(shí)候,就會將內(nèi)存中state的原始值改掉,引用并沒有變化,所以就出現(xiàn)了你看到的現(xiàn)象。

2018年8月25日 02:21