使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)

更新時(shí)間：2022年09月07日 14:33:07 作者：落落Plus

這篇文章主要介紹了使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)，具有很好的參考價(jià)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react修改state的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)

首先在修改狀態(tài)數(shù)據(jù)（state）的時(shí)候，我們要遵循react的規(guī)則,使用setState()方法去修改

此時(shí)修改的數(shù)據(jù)是一個(gè)數(shù)組或者是一個(gè)對(duì)象的時(shí)候，setState中傳遞一個(gè)對(duì)象是不能夠滿(mǎn)足的，此時(shí)就需要給setState中傳遞函數(shù)了！

此時(shí)函數(shù)中的參數(shù)state就是我們組件中的state數(shù)據(jù)，可以在方法中把參數(shù)中state改變后通過(guò)k:v return出來(lái)

handlerWorkType(item, index) {
  this.setState((state) => {
    for(let i = 0; i < state.submitWorksList.length; i++) {
      if(state.submitWorksList[i] == item.id) {
        state.submitWorksList.splice(i, 1)
        state.worksTypeList[index].activeShow = false
        return { 
          submitWorksList: state.submitWorksList,
          worksTypeList: state.worksTypeList
        }
      }
    }
    state.submitWorksList.push(item.id)
    state.worksTypeList[index].activeShow = true
    return { 
      submitWorksList: state.submitWorksList,
      worksTypeList: state.worksTypeList
    }
  })
}

需要注意

必須要在數(shù)據(jù)修改之后在通過(guò)k:v對(duì)return;

避免調(diào)用其它方法，將其它方法的返回值賦值給我們的變量；得不償失！

react修改數(shù)組對(duì)象的注意事項(xiàng)

react開(kāi)發(fā)主張使用函數(shù)式編程，函數(shù)式編程有個(gè)重要的特性就是不可變性。你無(wú)法更改數(shù)據(jù)，也不能更改。如果要改變或更改數(shù)據(jù)，則必須復(fù)制數(shù)據(jù)副本來(lái)更改。

看個(gè)例子，就是Vue和React兩個(gè)框架實(shí)現(xiàn)給數(shù)組添加一個(gè)元素。

vue

export default {
?? ?name: "home",
?? ?data() {
?? ??? ?return {
?? ??? ??? ?testArr: ['蘋(píng)果','香蕉']
?? ??? ?};
? ? },
? ? created(){
? ? ? ? this.testArr.push('橘子')
? ? }
};
...

react

class App extends React.Component {
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? testArr: ['蘋(píng)果','香蕉']
? ? ? ? };
? ? }
? ? componentDidMount(){
? ? ? ? this.setState({
? ? ? ? ? ? testArr:[...this.state.testArr,'橘子']
? ? ? ? })
? ? }
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <React.Fragment>
? ? ? ? ? ? ? ? <p>{this.state.testArr}</p>
? ? ? ? ? ? </React.Fragment>
? ? ? ? )
? ? }
}

這里會(huì)發(fā)現(xiàn)兩個(gè)框架有個(gè)細(xì)微差別，Vue是直接修改的原數(shù)組，而React是不修改原數(shù)組，而是創(chuàng)建了一份新的數(shù)組，再通過(guò)setState賦值。剛接觸React的時(shí)候的確會(huì)覺(jué)得挺奇怪，感覺(jué)會(huì)無(wú)形增加代碼復(fù)雜度。接下來(lái)看下為何React要如此設(shè)計(jì)。

React遵循函數(shù)式編程規(guī)范。在函數(shù)式編程中，不推薦直接修改原始數(shù)據(jù)。如果要改變或更改數(shù)據(jù)，則必須復(fù)制數(shù)據(jù)副本來(lái)更改。所以，函數(shù)式編程中總是生成原始數(shù)據(jù)的轉(zhuǎn)換副本，而不是直接更改原始數(shù)據(jù)。

這里是一些常見(jiàn)的React修改數(shù)組或者對(duì)象的例子，所有這些函數(shù)都不改變現(xiàn)有的數(shù)據(jù)，而是返回新的數(shù)組或?qū)ο蟆?/p>

刪除數(shù)組中的指定元素

//刪除testArr中的櫻桃
...
constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? ? testArr: ['蘋(píng)果','香蕉','橘子','櫻桃','橙子']
? ? };
}
componentDidMount(){
? ? this.setState({
? ? ? ? testArr:this.state.testArr.filter(res=>res!=='櫻桃')
? ? })
}
...

合并兩個(gè)對(duì)象

...
constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? ? testObj1:{
? ? ? ? ? ? chineseName:'橘子',
? ? ? ? ? ? englishName:'orange'
? ? ? ? },
? ? ? ? testObj2:{
? ? ? ? ? ? color:'yellow',
? ? ? ? ? ? shape:'circle'
? ? ? ? },
? ? ? ? testObj:{}
? ? };
}
componentDidMount() {
? ? this.setState({
? ? ? ? testObj: Object.assign(this.state.testObj1,this.state.testObj2)
? ? })
}
...

修改多層級(jí)對(duì)象的值

//testObj的apple的color改成green
...
constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? ? testObj: {
? ? ? ? ? ? banner: {
? ? ? ? ? ? ? ? name: '香蕉',
? ? ? ? ? ? ? ? color: 'yellow'
? ? ? ? ? ? },
? ? ? ? ? ? apple: {
? ? ? ? ? ? ? ? name: '蘋(píng)果',
? ? ? ? ? ? ? ? color: 'red'
? ? ? ? ? ? }
? ? ? ? }
? ? };
}
componentDidMount() {
? ? this.setState({
? ? ? ? testObj: {
? ? ? ? ? ? ...this.state.testObj,
? ? ? ? ? ? apple:{
? ? ? ? ? ? ? ? ...this.state.testObj.apple,
? ? ? ? ? ? ? ? color:'green'
? ? ? ? ? ? }
? ? ? ? }
? ? })
}
...

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: