在反應 redux 中使用空值搜索返回空數組而不是整個數據

Question

我正在創建一個 crud web 應用程序，我已將所有用戶呈現到來自第三方 API 的表中。 現在，我正在實現一個簡單的搜索框來根據First Name過濾表數據。 但是當我開始輸入並寫第一個字母時，它會過濾掉結果，但是當我按下退格鍵意味着清空搜索框時，它會返回一個空數組而不是為我提供整個數據。

下面是我的反應 redux 代碼：

零件

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;

我刪除了額外的代碼並使其非常容易理解。 請幫助我的人知道我被困在哪里。

Answer 1

發生這種情況是因為當某些結果為空數組時，您正在使用空數組更新用戶數組。

1.將 api 響應存儲在 users 數組中。 也在過濾數組 2.on 搜索不斷更新過濾數組但過濾用戶數組 3. 渲染過濾數組而不是用戶數組

Answer 2

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

這條線是問題

首先，您需要處理更改（更改狀態），然后您需要根據該 state 執行操作。 當您立即調用該操作時，您將獲得空字符串“”。

這是我使用 Hooks 完成的一個實現：

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 function ......祝你好運。