Поиск с пустым значением, возвращающий пустой массив вместо целых данных в реагирует - PullRequest
Новая
       5

Поиск с пустым значением, возвращающий пустой массив вместо целых данных в реагирует

0 голосов
/ 08 апреля 2020

Я создаю грубое веб-приложение, в котором я перевел всех пользователей в таблицу из стороннего API. Сейчас я реализую простое поле поиска для фильтрации данных таблицы в соответствии с Имя . Но когда я начинаю печатать и писать первую букву, он отфильтровывает результат, но когда я нажимаю клавишу Backspace, значит пустое поле поиска, он возвращает мне пустой массив вместо предоставления мне полных данных.

Ниже приведен мой реактивный редукционный код для того же:

Компонент 

import React from 'react';
import {connect} from 'react-redux'
import {fetchAllUsersAction,searchByUserName} from '../../redux/actions/user';

const mapStateToProps = (state) =>{
    return{
        users: state.usersData.users
    }
}

const mapDispatchToProps = (dispatch,props) =>{
    return{
        fetchUsersAction: (pageNumber) => {dispatch(fetchAllUsersAction(pageNumber))},
        searchAction: (value)=>{dispatch(searchByUserName(value))}
    }
}

class Users extends React.Component{
    render(){
        let {users} = this.props;
        return(
            <React.Fragment>
                <div className="container">
                    <div className="row mt-5">
                        <button className="btn btn-secondary" onClick={()=>this.props.fetchUsersAction(1)}>Fetch Users Data</button>

                        <input type="text" className="form-control" placeholder="Search with user name..." onChange={(e) => this.props.searchAction(e.target.value)} />
                    </div>

                    <div className="row mt-5 table-responsive">
                        <table className="table table-hover table-bordered">
                          <thead>
                            <tr>
                              <th scope="col">First Name</th>
                              <th scope="col">Last Name</th>
                              <th scope="col">Email</th>
                            </tr>
                          </thead>

                          <tbody>
                                (users.length>0)?
                                    users.map((item,index)=>(
                                        <tr key={item.id}>           
                                             <td>{item.first_name}</td>           
                                             <td>{item.last_name}</td>           
                                             <td>{item.email}</td>           
                                        </tr>
                                    ))
                                :
                                <tr>
                                  <td colSpan="7">No users found!</td>   
                                </tr>
                            }
                          </tbody>
                        </table>
                    </div>
                </div>
            </React.Fragment>            
        );
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Users);

Действие 

import {
    FETCH_ALL_USERS_SUCCESS,
    SEARCH_BY_USER_NAME
} from './action-types';

function fetchAllUsersSuccess(usersData){
    return {
        type: FETCH_ALL_USERS_SUCCESS,
        users_data: usersData
    }
}

export function fetchAllUsersAction(pageNumber) {
    return function(dispatch){
        fetch('https://reqres.in/api/users?page='+pageNumber)
            .then(res=>res.json())
            .then(json=>{
                dispatch(fetchAllUsersSuccess(json));
            })
    }
}

export function searchByUserName(value){
    return {type: SEARCH_BY_USER_NAME, value};
}

Редуктор 

import {
    FETCH_ALL_USERS_SUCCESS, 
    SEARCH_BY_USER_NAME
} from '../actions/action-types';


const initialState = {
    users: [] 
}

const userReducer = function(state = initialState, action) {
    switch(action.type) {
        case FETCH_ALL_USERS_SUCCESS:
            return {
                ...state,
                users: action.users_data.data
            }
        case SEARCH_BY_USER_NAME: {
              const {value} = action;
              const filtered_users = state.users.filter((val) => val.first_name.includes(value));
              return {...state, users:filtered_users};
            }                        
        default: 
            return state;
    }
}

export default userReducer;

Я удалил дополнительный код и сделал его чрезвычайно простым для понимания. Пожалуйста, помогите мне, ребята, узнать, где я застрял.

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

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

1. Сохранить ответ API в массиве пользователей. также в фильтрованном массиве 2. при поиске продолжайте обновлять фильтрованный массив, но фильтруйте по массиву пользователей 3. Визуализируйте фильтрованный массив, а не пользовательский массив

0 голосов
/ 08 апреля 2020

onChange={(e) => this.props.searchAction(e.target.value)}

ЭТА ЛИНИЯ - ПРОБЛЕМА

Сначала вам нужно обработать изменение (изменить состояние), затем вам нужно выполнить действие, основанное на этом состоянии. Когда вы немедленно вызываете действие, тогда вы получаете пустую строку ''.

Вот реализация, которую я сделал с использованием хуков: 

let { handleSearch } = props;
const [query, setQuery] = useState("");
const handleChange = e => {
setQuery(e.target.value);
};
useEffect(() => {
handleSearch(query);
}, [query]);
return (
<>
<div className="TableHeader-search">
<InputGroupAddon addonType="prepend">
<InputGroupText className="TableHeader-search__icon">
<img src={mGlass} alt="search" />
</InputGroupText>
</InputGroupAddon>
<input
className="TableHeader-search__input"
type="text"
onChange={handleChange}
placeholder={"Search..."}
name="search"
value={query}
/>
</div>
</>
);
};

Обратите внимание, что действие onChange сначала выполняет функцию handleChange. .. Удачи.

...