~~~ //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 } } }, }; ~~~