react dva如何更改state

這篇文章主要介紹了react dva如何更改state，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

react dva更改state的方法：1、創(chuàng)建DvaState.js和dvaState.js文件；2、輸入代碼為“import React from 'react';import { connect } from ...}”即可。

本文操作環(huán)境：Windows7系統(tǒng)、react17.0.1、Dell G3。

react  dva框架 點(diǎn)擊修改state的值 類似react中的this.state和this.setState()

先展示下

點(diǎn)擊改變前state的值

點(diǎn)擊改變后state的值的變化

首先創(chuàng)建者兩個(gè)文件

routes目錄下的DvaState.js

import React from 'react';import { connect } from 'dva';import { Link } from 'dva/router';let count  = 0const DvaState = ({
      dispatch,      dvaState,      }) => {  const {dataList} = dvaState
  console.log(dataList)
  console.log(dvaState)  const handleChangeState = () => {
    dispatch({      type:'dvaState/changeState',      payload:{        dataList:[
          {            list1: count++,            list2: 'list22',            list3: 'list33'          },          {            list2:'111'          }
        ]
      }
    })
  }  return (    <p>      <h3>dvaState</h3>      <h3>{dataList[0].list1}</h3>      <button onClick={handleChangeState}>改變state</button>    </p>  );};export default connect(({ dvaState }) => ({
  dvaState
}))(DvaState);

models 目錄下的 dvaState.js

export default {  namespace: 'dvaState',  state: {    dataList:[
      {        list1:'a',        list2:'c',      }
    ]
},  subscriptions: {    setup({ dispatch, history }) {

    },  },  effects: {

  },  reducers: {    changeState(state, {payload}) {      return {...state, ...payload}
    }
  },};

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“react dva如何更改state”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!