~~~ //src>routes>indexpages import React from 'react'; import { connect } from 'dva'; import styles from './IndexPage.css'; function IndexPage(props) { const additem=()=>{ // console.log(props.list) //把跟新后的数据放在list中传递过去进行跟新 const actionchadd ={ type:'example/handleAdd', list:props.list } props.dispatch(actionchadd); } //获取输入框中的值 const handleChange=(e)=>{ const actionchange ={ type:'example/handleChange', value:e.target.value } props.dispatch(actionchange); // console.log(e.target.value) } // console.log(props.value); return ( <div className={styles.normal}> <input onChange= { async e => { e.persist() await handleChange(e) }}/> <button onClick={additem}>添加</button> <ul> {props.list.map((item, index) => { return <li key={index}>{item}</li> })} </ul> </div> ); } //用于连接模板文件与models文件 export default connect(({example})=>{ return{ //接收models的state中的数据 list: example.list } })(IndexPage); ~~~ ~~~ export default { namespace: 'example', state: { list:[], }, subscriptions: { setup({ dispatch, history }) { }, }, effects: { *fetch({ payload }, { call, put }) { // eslint-disable-line yield put({ type: 'save' }); }, }, reducers: { save(state, action) { return { ...state, ...action.payload }; }, //接收传递过来的type和value并将其展开和state一起返回，换回出来的数据可供全局使用，在handleadd中可使用 handleChange(state,value) { // console.log(value.value) return { ...state, ...value }; }, //将handlechange中的 handleAdd(state,list){ //经过判断将value的值添加到list中去（value是handlechange中返回的value，此处的list是页面上要渲染的数据） // console.log(list) if (!list.list.includes(state.value)&&!state.value=='') { list.list.push(state.value); } // console.log(state.list) //处理函数里面一定要有return函数，且return后面的语句不执行 return { ...list } } }, }; ~~~