带有Redux Dispatch/React Hooks的Helper函数

Question

我在几个组件中重复调度。我想使用一个辅助函数来导入和使用多个组件。它不是直截了当的，至少对我来说是令人抓狂的。读了一堆关于这个的帖子，但是没有联系。

我得到的问题是react-dom.development.js:16227未捕获错误:无效钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:你可能违反了钩子规则

如何在helper函数中调用dispatch呢?我认为定制挂钩可能是一种可行的方法——现在就考虑一下。

组件示例:

...imports...    
import { helperCall } from '../../assets/helperFunctions/helperCall';
export default function CompExamp() {

...variables...

return (
<div className="min-w-0 flex-1"
onClick={(e) => helperCall(e, searchText, searchType)}
>
<span className="absolute inset-0" aria-hidden="true" />
<p className="text-sm font-medium text-black">Target</p>
<p className="text-base text-gray-700">test</p>
</div>
)
}

剥离辅助函数:

import React from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { loadASearchResults, updateASearchTerm } from '../../redux/actionsReducers/AResults';
import { loadBSearchResults, updateBSearchTerm } from '../../redux/actionsReducers/BResults';
import { loadCSearchResults, updateCSearchTerm } from '../../redux/actionsReducers/CResults';

export function helperCall(e: any, searchText: string, searchType: string) {
const dispatch = useDispatch();
const navigate = useNavigate();
e.preventDefault();
e.stopPropagation();
if (!searchText || searchText === '-' || searchText.toLowerCase() === 'not listed') {
return;
}
if (searchType === 'a') {
dispatch(updateASearchTerm({ searchTerm, searchType }));
dispatch(loadASearchResults({ searchTerm, searchType }));
navigate('/page-a');
} else if (searchType === 'b') {
dispatch(updateBSearchTerm({ searchTerm, searchType }));
dispatch(loadBSearchResults({ searchTerm, searchType }));
navigate('/page-b');
} else if (searchType === 'c') {
dispatch(updateCSearchTerm({ searchTerm, searchType }));
dispatch(loadCSearchResults({ searchTerm, searchType }));
navigate('/page-c');
}
}

Answer 1

你只能在React函数式组件中使用React钩子，但是你可以像这样将函数传递给辅助函数:

import { helperCall } from "../../assets/helperFunctions/helperCall";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
export default function CompExamp() {
const dispatch = useDispatch();
const navigate = useNavigate();
/* variables  */
return (
<div
className="min-w-0 flex-1"
onClick={(e) => helperCall(e, searchText, searchType, dispatch, navigate)}
>
<span className="absolute inset-0" aria-hidden="true" />
<p className="text-sm font-medium text-black">Target</p>
<p className="text-base text-gray-700">test</p>
</div>
);
}

import React from 'react';
import { loadASearchResults, updateASearchTerm } from '../../redux/actionsReducers/AResults';
import { loadBSearchResults, updateBSearchTerm } from '../../redux/actionsReducers/BResults';
import { loadCSearchResults, updateCSearchTerm } from '../../redux/actionsReducers/CResults';

export function helperCall(e: any, searchText: string, searchType: string, dispatch: Function, navigate: Function) {
e.preventDefault();
e.stopPropagation();
if (!searchText || searchText === '-' || searchText.toLowerCase() === 'not listed') {
return;
}
if (searchType === 'a') {
dispatch(updateASearchTerm({ searchTerm, searchType }));
dispatch(loadASearchResults({ searchTerm, searchType }));
navigate('/page-a');
} else if (searchType === 'b') {
dispatch(updateBSearchTerm({ searchTerm, searchType }));
dispatch(loadBSearchResults({ searchTerm, searchType }));
navigate('/page-b');
} else if (searchType === 'c') {
dispatch(updateCSearchTerm({ searchTerm, searchType }));
dispatch(loadCSearchResults({ searchTerm, searchType }));
navigate('/page-c');
}
}