使用Redux Dispatch/React Hooks的辅助函数

Question

我有几个在其中重复调度的组件。我想使用辅助函数在多个组件中导入和使用。令人抓狂的是，这并不简单——至少对我来说是这样。阅读了很多关于此的文章，但无法关联它。

我遇到的问题是react-dom.development.js:16227 Uncaught Error: Invalid hook call。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 您可能违反了 Hooks 规则

那么如何在辅助函数中调用调度呢？我认为自定义挂钩可能是可行的方法 - 现在就看看它。

精简组件示例：

...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 hooks，但您可以将函数传递给辅助函数，如下所示：

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 (
    
 helperCall(e, searchText, searchType, dispatch, navigate)}
    >
      
      
Target
      
test
    
  );
}

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