Question

我正在尝试使用功能组件，react挂钩和redux构建一个React Web应用程序。我不知道为什么我收到无效的挂接呼叫。当我单击“搜索”按钮时，出现反应错误。

这是完整的代码：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux'

export const SearchBar = () => {
    const searchParameters = useSelector(state => state.searchParameters ?? {});
    const dispatch = useDispatch;

    return (
        <div className="searchbar">
            <div className="search-parameters">
                <BasicSearch searchParameters={searchParameters} />
                <div className="col form-group">
                    <button type="button" className="btn btn-primary" onClick={() => dispatch(doSearch())} >
                        SEARCH
                    </button>
                </div>
            </div>
        </div>
    );
}

const BasicSearch = (props) => {
    return (
        <>
            <input type="text" id="origin" />
        </>
    );
}

const Actions = {
    DO_SEARCH: "DO_SEARCH"
}

const doSearch = () => {
    return { type: Actions.DO_SEARCH };
}

Answer 1

更新

const dispatch = useDispatch();

和

onClick={() => dispatch(doSearch)}

Answer 2

在第六行代码中的

useDispatch是一个函数，因此您需要像这样将变量dispatch分配给它：

const dispatch = useDispatch();

为什么我收到无效的挂机呼叫

2 个答案: