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