Javascript 首次使用后，筛选数据的功能不起作用

我正在用React和redux构建一个应用程序。以下内容的目的是充当主管道的减速器（与组合减速器相连）。我正在导入一个filterData函数，，它在您第一次选择任何动作类型时起作用。遗憾的是，filterData函数在第一次操作之后将不可用。我认为这与事实有关，我的第一个动作过滤了所有其他数据。。。没有什么可合作的。我需要filter data函数在用户选择任何操作后继续工作，并继续传递action.payload

import {
    FETCH_USERS_REQUEST,
    FETCH_USERS_SUCCESS,
    FETCH_USERS_FAILURE,
    STATUS_5500_SUBMITTED_ActionType,
    STATUS_5500_Success_ActionType,
    STATUS_5500_Ready_To_File_ActionType,
    STATUS_5500_Error_ActionType,
    SortingAllPlansAlphabetically
} from "./FakeStuff/userTypes";


import { filterData } from "../../States/AllStates/FakeStuff/userActions";

const initialState = {
    loading: true,
    data: [],
    error: ""
};


const FakeReducer = (state = initialState, action) => {

    switch (action.type) {
        case FETCH_USERS_REQUEST:
            return {
                ...state,
                loading: true
            };
        case FETCH_USERS_SUCCESS:
            return {
                loading: false,
                //data: action.payload,
                data: filterData(action.payload),
                error: ""
            };
        case FETCH_USERS_FAILURE:
            return {
                loading: false,
                data: [],
                error: action.payload
            };


        case STATUS_5500_SUBMITTED_ActionType:
            return {
                data: filterData(state.data, "Submitted"),
            };

        case STATUS_5500_Success_ActionType:
            return {
                data: filterData(state.data, "Success")
            };


        case STATUS_5500_Ready_To_File_ActionType:
            return {
                data: filterData(state.data, "Ready To File")

            };
        case STATUS_5500_Error_ActionType:
            return {
                data: filterData(state.data, "Error")

            };

        case SortingAllPlansAlphabetically:
            return {
                loading: state.loading,
                error: state.error,
                data: console.log("yolo")
            };



        default:
            return state;
    }
};

export default FakeReducer;

我的函数来自另一个文件

export const filterData = (Data, searchText) => {
    console.log("filterData's searchText value is : " + searchText)
    return Data.filter(xyz => {

        if (xyz.Status55.includes(searchText)) {
            return true;

        }
        if (xyz.planType.includes(searchText)) {
            return true;
        }

        if (searchText === undefined) {
            return true;
        }

        if (searchText !== undefined) {
            return false;
        }

    })

}

我还有以下步骤来加载初始数据，并在Axios成功加载数据后发送操作

export const fetchUsers = () => {
    return (dispatch) => {
        dispatch(fetchUsersRequest)
        //axios.get("https://jsonplaceholder.typicode.com/users")
        axios.get("./PublicData/BookOfBusiness.json")
            .then(response => {
                const users = response.data
                dispatch(fetchUsersSuccess(users))

            })
            .catch(error => {
                const ErrorMsg = error.message
                dispatch(fetchUsersFailure(ErrorMsg))
            })
    }
}

谢谢你的帮助。

你应该考虑在渲染前使用数据过滤。这样可以保持源数据的完整性，只需切换

过滤器

状态

减速器现在只设置过滤器的状态：

。。。
案例状态\u 5500\u已提交\u行动类型：
返回{
……国家，
过滤器：“已提交”
};
案例状态\u 5500\u成功\u行动类型：
返回{
……国家，
过滤器：“成功”
};
...

您可以使用选择器将状态映射到

connect

helper中的道具：

const filterData = ({ data, filter }) => {
  ...filter code goes here - it must return the filtered data
}

const mapStateToProps = state => ({
  data: filterData(state)
})

const ConnectedComponent = connect(mapStateToProps)(MyComponent)

---

您可以使用中的

createSelector

helper来优化选择器，使其仅在参数更改时计算（记忆/缓存）。

能否详细说明“不起作用”？函数是否被调用？它没有给出预期的结果吗？你能举一个例子说明你的期望和你得到的吗？浏览一下你的代码和问题描述，它不是很明显。@James嗨，James，我刚刚更新了原来的帖子。我的错。谢谢你，但是它似乎不符合当前的逻辑。我正在尝试调用您在MapStateTops上推荐的filterData。仍在进行中，我将更新查找结果。请记住，您在

mapStateToProps

中收到的

状态

是全局重排状态-您可能需要首先提取您的内部和所需状态。