Reactノート(複雑なstate)

一、クラスコンポーネント

class Welcome extends React.Component {
  constructor() {
    super()
    this.state = {
      n: 0,
      m: 0,
    }
  }
  addN() {
    this.setState({
      n: this.state.n + 1
    })
  }
  addM() {
    this.setState({
      m: this.state.m + 1
    })
  }
  render() {
    return (
      

         n:{this.state.n}
          this.addN() }>
            n + 1
       
         m:{this.state.m}
          this.addM() }>
            m + 1
       
      
    )
  }
}
export default Welcome
 ：

上のコードはsetState nの時にmに値を与えていませんが、mはundefinedに上書きされますか?答えは、クラスコンポーネントのsetStateでは、一部を変更し、他の部分はundefinedで上書きされずに前回の値を自動的に遅延します.
あるいは自分で延用することができます.

this.stateState ({ ...this.state , n : this.state.n + 1 })

前のstateの値をコピーしてnをn+1にします.普通はそう書く必要はありません.Reactは自動的に加算されます.this.stateは、自動マージと呼ばれます.
注意:setStateでは、レイヤ1のプロパティのみが自動的にマージされ、レイヤ2のプロパティはマージされません.

stateに第2層属性がある場合

class Welcome extends React.Component {
  constructor() {
    super()
    this.state = {
      n: 0,
      m: 0,
      user: {
        name: 'fang',
        age: 18,
      }
    }
  }
  changeUser() {
    this.setState({
      // m   n  
      user: {
        name: "jack"
        // age  
      }
    })
  }
  render() {
    return (
      

        
user.name: {this.state.user.name}
        
user.age: {this.state.user.age}
         this.changeUser()}>change user
      
    )
  }
}
export default Welcome

上のコードは、set userのnameにいるとageが空になります.

{ name : 'fang' , age : 18 } => { name : 'jack' }

解決方法:1.使用...オペレータ

  changeUser() {
    this.setState({
      // m   n  
      user: {
        ...this.state.user,
        name: "jack"
      }
    })
  }

2.Objectを使用する.assign

const user = Object.assign({}, this.state.user)
    user.name = 'jack'
    this.setState({
      // m   n  
      user: user
    })

二、関数コンポーネント

const Welcome = () => {
  const [n, setN] = React.useState(0)
  const [m, setM] = React.useState(0)
  return (
    

       n:{n}
       setN(n + 1)}>  n + 1
       m:{m}
       setM(m + 1)}>  m + 1
    
  )
}

上のコードは関数コンポーネントに2つのstateがどのように使用されるかですが、関数コンポーネントのコードはクラスコンポーネントのコードよりずっと少ないと思いますか?個人的には関数コンポーネントをお勧めします.

推薦しない書き方:

const Welcome = () => {
  const [state, setState] = React.useState({
    n: 0, m: 0
  })
  return (
    

       n:{state.n}
       setState({ n: state.n + 1 })}>
          n + 1
        
       m:{state.m}
       setState({ m: state.m + 1 })}>
          m + 1
        
    
  )
}

上のコードは、n+1をクリックしてm+1をクリックするとmがNaNになります.n+1をクリックするとmもundefinedに割り当てられるので、m+1をクリックするとNaNになります.

 setState({ n: state.n + 1 ,m : undefined})}>

関数コンポーネントのsetStateは自動的にマージされません
解決策:

使用...オペレータ

 setState({ ...state , n: state.n + 1 })}>

まとめ

クラスコンポーネントのsetStateは、自動的に第1層の属性をマージするが、第2層の属性はマージされず、Objectを使用する.assignか...オペレータによる

の解決

関数コンポーネントのsetXは完全にマージされません.マージするには...オペレータ