~~~ import { Button, message, Spin, Form, Input } from 'antd@3.x'; import React, { useReducer, useCallback, useEffect, useRef } from 'react'; // src/service/xxx.js const queryUser = async (filter) => { // 這里應使用 bigfish 的 fetch， // 把 filter 注入到請求的參數中，因為是 mock，這里先不處理 const res = await fetch(`https://mocks.alibaba-inc.com/mock/mkQ5fN3eq/userDelay`); return res.json(); } // src/page/xxx.js const initFilter = { name: '', time: '', type: '', }; const initState = { filter: initFilter, loading: true, data: '', }; // 寫一個 reducer，針對開始獲取，獲取成功，獲取失敗等情況進行處理 const reducer = (state = initState, action: { type: string; payload?: any }) => { switch (action.type) { // 開始 fetch，設置 loading 狀態為 true case 'startFetch': return { ...state, loading: true }; // fetch 成功，儲存 data，同時取消 loading case 'fetchSuccess': return { ...state, loading: false, data: action.payload }; // fetch 失敗，取消 loading case 'fetchFailed': return { ...state, loading: false }; // 過濾條件發生改變 case 'changeFilter': return { ...state, filter: { ...state.filter, ...action.payload } }; default: throw new Error(); } }; const App = Form.create()((props) => { const [state, dispatch] = useReducer(reducer, initState); const { getFieldDecorator, getFieldsValue } = props.form; // 監聽 filter 的變化，當 filter 發生改變，則根據當前 filter 重新搜索; useEffect(()=>{ // 為了避免寫錯依賴產生 bug，React 官方建議的方法是把函數寫在 // useEffect 內部，避免了依賴的問題。 const request = async() => { dispatch({type: 'startFetch'}); const { data } = await queryUser(state.filter); if(data){ dispatch({type: 'fetchSuccess', payload: data.name}); } else { message.error('請求失敗'); dispatch({type: 'fetchFailed'}); } } // 調用 request 函數。 request(); }, [state.filter]) return ( <div> <div style={{width: 300}}> { getFieldDecorator('name')( <Input placeholder='篩選條件1(name)' /> ) } { getFieldDecorator('time')( <Input placeholder='篩選條件2(time)' /> ) } { getFieldDecorator('type')( <Input placeholder='篩選條件3(type)' /> ) } <Button loading={state.loading} onClick={()=>{ console.log(getFieldsValue()); dispatch({type: 'changeFilter', payload:getFieldsValue() }) }}>搜索</Button> </div> <div> <div>搜索條件：{JSON.stringify(state.filter)}</div> <div>搜索結果：{state.loading ? <Spin /> : state.data}</div> </div> </div> ) }); ReactDOM.render(<App />, mountNode); ~~~