Return 并显示数据，但有条件

Question

我有这个“api”并通过它对一组用户进行 returned，然后我将用户显示在 table 中，并且数据的形式是return根据书面代码编写的是：

而且从图中可以看出，return数据中有两个变量，第一个是“isActive”，第二个是“isVerified”，这两个变量是“假”或“真”。

问题是我只想return两个变量的值为真的数据。

也就是后台return数据，这个数据是一组用户，每个用户有两个值“isActive”和“isVerified”，要么我有这些值“ true" 和 "false"，但我需要的是 return 数据并仅在这两个值为 true 时显示在 table 中。

我该如何解决这个问题？

export const getUsers = createAsyncThunk(
  "usersRequests/getUsersRequests",
  async (routeParams, { getState }) => {
    routeParams = routeParams || getState().usersApp.users.routeParams;
    const response = await axios
      .get("/users/for-admin", {
        params: routeParams,
      })
      .catch((err) => console.log(err));
    const usersRequestsData = response.data.data;
    console.log("data inside Slice:", usersRequestsData);
    return usersRequestsData;
  }
);

Answer 1

在 .catch 之前，使用 .then 通过 return 过滤器准备数据，例如：

.then((res) => res.filter((item) => item.valueToEvaluate1 && item.valueToEvaluate2))

了解过滤器的文档https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

好吗？

Answer 2

最好的方法是向您的 URL 添加一个查询，例如 /?active=true&verified=true，当然，向您的后端添加解析和逻辑，或者您可以创建一个单独的路线.

如果第一个解决方案不适合您，您可以在 front-end 中对其进行过滤，我认为在 async thunk 中进行过滤不是一个好方法，您应该在 reducer 中对其进行过滤。

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getUsers.fulfilled, (state, { payload }) => {
      state.users = payload.filter(u => u.isActive === true && u.isVerified === true);
    });
  },
});

Return 并显示数据，但有条件

Return and display data, but with condition

reactjs

material-ui

redux-toolkit