Javascript 如何在每次输入更改时使用服务器数据使antd自动完成更新下拉列表

我有一个使用antd、redux和saga的项目， 我特别使用antd autocompletehttps://ant.design/components/auto-complete/

我试图让antd autocomplete处理服务器数据，并在用户每次输入内容时发送redux操作。问题是我不知道如何让它与redux传奇一起工作

假设我成功地从服务器获取数据，并用该数据更新存储。那么如何在下拉列表中显示这些数据。每次用户类型更改时，下拉列表数据可能都会更改

const{createStore，applyMiddleware}=Redux； const{Provider，connect}=ReactRedux； const{createAction，handleActions}=window.reduxations； const createSagaMiddleware=ReduxSaga.default； const{takeEvery，takeLatest，put，call}=ReduxSaga.effects； 常数{AutoComplete}=antd； const{Option，OptGroup}=AutoComplete； 常量初始状态={ 孤岛加载：false， 名单：[]， }; 变量数据源=[ { 方向ID:3e8a6a23-d325-4c74-9bb5-e83c0bd4de4e， 方向名称：ABC， 项目：[ { docflowType:71， docflowTypeName:infoABC， 起始日期：2019-10-07T09:47:32.119004， 结束日期：2019-10-07T09:47:32.119004， 计数：1 } ] }, { 方向ID:7feb83e0-4d7b-4d99-8adb-23c25473d57d， 方向名称：TGK， 项目：[ { docflowType:74， docflowTypeName:reportG， 开始日期：2019-10-07T09:42:08.549327， 结束日期：2019-10-07T09:42:08.549327， 计数：1 } ] } ] 函数renderTitle{ 回来 {title} ; } const options=dataSource.mapgroup=> {group.items.mapopt=> {opt.docflowTypeName} {opt.count} } ; const fetchSuggest=createAction'FETCH\u SUGGEST\u REQUEST'，payload=>payload； const fetchSuggestSuccess=createAction'FETCH\u suggestsuccess'，result=>result； const fetchSuggestError=createAction'FETCH_SUGGEST_ERROR'； const autoSuggesting=手动操作 { [fetchSuggest]：状态，操作=>{ 状态 孤岛加载：是的， }, [fetchSuggestSuccess]：状态，操作=>{ console.logfetchSuggestSuccess，action； 返回{ 状态 孤岛加载：false， 列表：action.payload， }}, [fetchSuggestError]：状态，操作=>{ 状态 孤岛加载：false， } }, 初始状态 ; const fetchList=异步负载=>{ var{filter，exclusion}=payload | |{}； const response=等待axios.get`http://someserver.com?filter=${filter}&exceptTestCodes=${exclusion}`； 返回响应数据； }; 函数*fetchSuggestionaction{ console.logworker传奇，action.payload 试一试{ const data=action.payload； const response=yield callfetchList，data； console.logresponse； //产量延迟200； 产生putfetchSuggestSuccessresponse； }捕捉错误{ 产生建议错误； } } 函数*watchInput{ 获取最新的“获取建议请求”，获取建议； } const sagaMiddleware=createSagaMiddleware； const store=createStoreautoSuggesting，initialState，applyMiddlewaresagaMiddleware； sagaMiddleware.runwatchInput； 类应用程序扩展了React.Component{ 构造器{ 超级作物； this.state={value:，dataSource:[]}； } handleSearch=searchText=>{ 这是我的国家{ 数据源：！searchText？[]：this.getListToDisplay， }; } handleChange=值=>{ 这个.setState{value}； this.props.fetchSuggest{filter:value，exclusion:false}； } getListToDisplay==>{ 返回this.props.list.mapgroup=> {group.items.mapopt=> {opt.docflowTypeName} {opt.count} } } 渲染{ 回来 ; } } const mapStateToProps=state=>state； const mapDispatchToProps=dispatch=>{fetchSuggest:data=>dispatchfetchSuggestdata}； const ConnectedApp=connectmapStateToProps，mapDispatchToPropsApp； ReactDOM.render，document.getElementById'root'；

---

这在基于ajax的官方文档下拉列表中给出

import { Select, Spin } from 'antd';
import debounce from 'lodash/debounce';

function DebounceSelect({ fetchOptions, debounceTimeout = 800, ...props }) {
  const [fetching, setFetching] = React.useState(false);
  const [options, setOptions] = React.useState([]);
  const fetchRef = React.useRef(0);
  const debounceFetcher = React.useMemo(() => {
    const loadOptions = (value) => {
      fetchRef.current += 1;
      const fetchId = fetchRef.current;
      setOptions([]);
      setFetching(true);
      fetchOptions(value).then((newOptions) => {
        if (fetchId !== fetchRef.current) {
          // for fetch callback order
          return;
        }

        setOptions(newOptions);
        setFetching(false);
      });
    };

    return debounce(loadOptions, debounceTimeout);
  }, [fetchOptions, debounceTimeout]);
  return (
    <Select
      labelInValue
      filterOption={false}
      onSearch={debounceFetcher}
      notFoundContent={fetching ? <Spin size="small" /> : null}
      {...props}
      options={options}
    />
  );
} // Usage of DebounceSelect

async function fetchUserList(username) {
  console.log('fetching user', username);
  return fetch('https://randomuser.me/api/?results=5')
    .then((response) => response.json())
    .then((body) =>
      body.results.map((user) => ({
        label: `${user.name.first} ${user.name.last}`,
        value: user.login.username,
      })),
    );
}

const Demo = () => {
  const [value, setValue] = React.useState([]);
  return (
    <DebounceSelect
      mode="multiple"
      value={value}
      placeholder="Select users"
      fetchOptions={fetchUserList}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      style={{
        width: '100%',
      }}
    />
  );
};

ReactDOM.render(<Demo />, mountNode);