javascript - React-redux - 控制台给出 "TypeError: props.fetchSearchResults is not a function"

Question

所以我又来这里问问题了。我一生都无法弄清楚为什么在运行函数handleKeyPress时会出现错误“TypeError: props.fetchSearchResults is not a function”。

我相信函数是从操作正确导入的，并且操作代码本身不应该有任何问题。如果你们能提供任何帮助，我将不胜感激。

代码在这里:

       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';

reducer 是:

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

你永远不会将 Prop 传递到handleKeyPress方法中，

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

您需要将 Prop 传递给方法:

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