ReactJs фильтрация редуктора крючка через массив на основе ввода строки пользователя - PullRequest
Новая
       45

ReactJs фильтрация редуктора крючка через массив на основе ввода строки пользователя

0 голосов
/ 09 июля 2020

Я могу отфильтровать данные, которые мне не принадлежат, но когда пользователь удаляет то, что он набрал, данные, которые были отфильтрованы, не возвращаются. Как лучше всего вернуть отфильтрованные значения массива? 

import React, { useReducer } from "react";
import "./styles.css";

const USER_UPDATE = "USER_UPDATE";
const ADD_USER = "ADD_USER";
const REMOVE_USER = "REMOVE_USER";
const FILTER_USER = "FILTER_USER";

const initState = { users: [], user: "" };

const reducer = (state, action) => {
  switch (action.type) {
    case FILTER_USER:
      return {
        ...state,
        users: state.users.filter(
          user =>
            user.toLowerCase().indexOf(action.payload.toLowerCase()) !== -1
        )
      };
    default:
      return state;
  }
};

export default function App() {
  const [state, dispatch] = useReducer(reducer, initState);
  const userUpdate = e => {
    const { value } = e.target;
    dispatch({ type: USER_UPDATE, payload: value });
  };
  const addNewUser = () => dispatch({ type: ADD_USER });
  const removeUser = i => dispatch({ type: REMOVE_USER, payload: i });
  const handleFilter = e =>
    dispatch({ type: FILTER_USER, payload: e.target.value });
  const renderUsers = state.users.map((user, i) => (
    
      
      {user}
    
  ));
  return (
    
      {state.user}
Добавить {renderUsers} ); }

e, чтобы вернуть исходные данные, которые были отфильтрованы?

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Просто поместите код state.users.filter(...) в функцию рендеринга и используйте условное выражение для фильтрации пользователей. 

export default function App() {
  ...
  
  const filteredUsers = state.filter 
    ? state.users.filter(user => user.includes(state.filter)) 
    : state.users;
  ...

  return (
    ...
    {filteredUsers}
    ...
  )

}
1 голос
/ 09 июля 2020

Лучшим подходом здесь было бы не фильтровать данные пользователей в вашем редукторе. Вы должны увидеть свой редуктор в качестве базы данных и иметь функцию selector в качестве запроса. Я добавлю ключ filter к редуктору, а затем вычислю отфильтрованных пользователей в переменной. 

<code>import React, { useReducer } from "react";
import "./styles.css";

const USER_UPDATE = "USER_UPDATE";
const ADD_USER = "ADD_USER";
const REMOVE_USER = "REMOVE_USER";
const FILTER_USER = "FILTER_USER";

const initState = { users: [], filter: "", user: "" };

const reducer = (state, action) => {
  switch (action.type) {
    case FILTER_USER:
      return {
        ...state,
        filter: action.payload, // we'll just update the filter key
      };
    default:
      return state;
  }
};

export default function App() {
  const [state, dispatch] = useReducer(reducer, initState);
  const filteredUsers = state.users.filter(
          user =>
            state.filter === "" || user.toLowerCase().indexOf(state.filter.toLowerCase()) !== -1 // we filter our users by our string, or if it's empty, we'll return it.
        )
  }

  const userUpdate = e => {
    const { value } = e.target;
    dispatch({ type: USER_UPDATE, payload: value });
  };
  const 
  const addNewUser = () => dispatch({ type: ADD_USER });
  const removeUser = i => dispatch({ type: REMOVE_USER, payload: i });
  const handleFilter = e =>
    dispatch({ type: FILTER_USER, payload: e.target.value });
  const renderUsers = filteredUsers.map((user, i) => (
    <li
      key={i}
    >
      <button
        onClick={() => removeUser(i)}
      >
        x
      </button>
      <p style={{}}>{user}</p>
    </li>
  ));
  return (
    <div className="App">
      <pre>{state.user}
Добавить {renderUsers} ); }

Таким образом, вы всегда будете держать своих пользователей в безопасности в редукторе, а также сможете фильтровать.

...