Question

我一直试图根据文本输入创建一个搜索过滤器下拉列表，但是我不确定为什么遇到状态文本值未连接到输入表单值的问题。我看到的大多数示例已经具有要在数组等中搜索的值，并且它们尝试根据这些值创建过滤器搜索，这就是为什么我很难为自己的案例重新创建这些示例。

actions.js（文本是用户输入的文本值，我正尝试取回与从api输入的每个字符匹配的可能项目）

    export const filterSearch = text => async dispatch => {
    const response = await api.get(`/api?filter[text]=${text}`);
    dispatch({ type: FILTER_SEARCH, payload: response.data });
    };

filterReducer.js

    import { FILTER_SEARCH } from "../actions/types";
    const initialState = {
     text: ""
    };
    export default (state = initialState, action) => {
     switch (action.type) {
      case FILTER_SEARCH:
       return {
        ...state,
        text: action.text
       };
      default:
       return state;
     } 
    };

Search.js

    import React from "react";
    import { connect } from "react-redux";
    import { filterSearch } from "../actions";
    const Search = props => {
      return (
        <div>
          <input
            type="text"
            placeholder="search"
            value={props.filter.text}
            onChange={e => {
              props.filterSearch(e.target.value);
            }}
          />
        </div>
      );
    };

    const mapStateToProps = state => {
      return {
        filter: state.filter
      };
     };

    export default connect(
      mapStateToProps,
      { filterSearch }
    )(Search);

感谢您的帮助

使用api端点创建React Redux搜索过滤器

0 个答案: