日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

使用react在修改state中的數組和對象數據的時候(setState)_React

作者：落落Plus ? 更新時間： 2022-11-01 編程語言

react修改state的數組和對象數據的時候(setState)

首先在修改狀態數據（state）的時候，我們要遵循react的規則,使用setState()方法去修改

此時修改的數據是一個數組或者是一個對象的時候，setState中傳遞一個對象是不能夠滿足的，此時就需要給setState中傳遞函數了！

此時函數中的參數state就是我們組件中的state數據，可以在方法中把參數中state改變后通過k:v return出來

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
    }
  })
}

需要注意

必須要在數據修改之后在通過k:v對return;

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

react修改數組對象的注意事項

react開發主張使用函數式編程，函數式編程有個重要的特性就是不可變性。 你無法更改數據，也不能更改。 如果要改變或更改數據，則必須復制數據副本來更改。

看個例子，就是Vue和React兩個框架實現給數組添加一個元素。

vue

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

react

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

這里會發現兩個框架有個細微差別，Vue是直接修改的原數組，而React是不修改原數組，而是創建了一份新的數組，再通過setState賦值。剛接觸React的時候的確會覺得挺奇怪，感覺會無形增加代碼復雜度。接下來看下為何React要如此設計。

React遵循函數式編程規范。在函數式編程中，不推薦直接修改原始數據。 如果要改變或更改數據，則必須復制數據副本來更改。所以，函數式編程中總是生成原始數據的轉換副本，而不是直接更改原始數據。

這里是一些常見的React修改數組或者對象的例子，所有這些函數都不改變現有的數據，而是返回新的數組或對象。

刪除數組中的指定元素

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

合并兩個對象

...
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)
? ? })
}
...

修改多層級對象的值

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

原文鏈接：https://blog.csdn.net/weixin_44356485/article/details/101292919

欄目分類
最近更新