React-redux - Консоль выдает «Ошибка типа: props.fetchSearchResults не является функцией»

Question

Итак, я снова задаю вопросы. Я не могу на всю жизнь понять, почему это выдает ошибку «Ошибка типа: props.fetchSearchResults не является функцией» при запуске функции handleKeyPress.

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

Код здесь:

       import React from 'react';
        import {Link} from 'react-router-dom';
        import {connect} from 'react-redux';
        import { fetchSearchResults } from '../store/actions/homepageActions';

        const Navbar = () => {
            return (
                <span>
                    <nav className='nav'>
                        <Link to='/' className='nav-link'>Home</Link>
                        <Link to='/movies' className='nav-link'>Movies</Link>
                        <Link to='/tv-shows' className='nav-link'>Tv-Shows</Link>
                        <span className='user-search-panel'>
                            <div className='form-group search'>
                            {
                                // function handleKeyPress is used here 
                            }
                                <input label='search' onChange={onInputChange} onKeyPress={(e) => handleKeyPress(e, tmpValue)} className='form-control search' placeholder='Search...' />
                            {
                                // function handleKeyPress is used here 
                            }
                            </div> 
                        </span>
                    </nav>
                </span>
            )
        }

        let tmpValue = null;

        const onInputChange = (event) => {
            tmpValue = event.target.value;
            console.log(tmpValue);
        }

        const handleKeyPress = (e, props, tmpValue) => {
            if(e.key === 'Enter'){        
                props.fetchSearchResults(tmpValue);
            }
        }



        export default connect(null, { fetchSearchResults })(Navbar);

Это функция fetchSearchResults.

export const fetchSearchResults = (tmpValue) => {
    return dispatch => {
        Axios.get(`https://api.themoviedb.org/3/search/multi?api_key=${API_KEY}&language=en-US&query=${tmpValue}&page=1&include_adult=false`)
        .then((res) => {
            console.log(res.data)
            dispatch({
                type: FETCH_SEARCH_RESULT,
                payload: res.data
            })
        })
        .catch((err) => console.log(err))
    }
}

Само действие просто базовое: export const FETCH_SEARCH_RESULT = 'FETCH_SEARCH_RESULT';

Редуктор:

import { FETCH_SEARCH_RESULT } from '../actions/actions';
    const initState = {
        results: [],
    }
    const moviesTvReducer = (state = initState, action) => {
        switch (action.type){
            case FETCH_SEARCH_RESULT:
            return {
                ...state,
                results: [action.payload]
            }
            default:
            return state;
        }
    }

Answer 1

Вы никогда не передадите реквизиты в метод handleKeyPress,

onKeyPress={(e) => handleKeyPress(e, tmpValue)}

Вам необходимо передать реквизит методу:

onKeyPress={(e) => handleKeyPress(e, props, tmpValue)}