Hilfsfunktionen für die Verwendung von Redux Dispatch/React Hooks

Question

Ich habe mehrere Komponenten, die darin immer wieder eingeplant sind. Ich möchte eine Hilfsfunktion zum Importieren und Verwenden in mehreren Komponenten verwenden. Verrückterweise ist es nicht einfach – zumindest für mich. Habe viel darüber gelesen, kann mich aber nicht damit identifizieren.

Das Problem, auf das ich gestoßen bin, war „react-dom.development.js:16227 Uncaught Error: Invalid Hook Call“. Hooks können nur innerhalb des Körpers einer Funktionskomponente aufgerufen werden. Dies kann einen der folgenden Gründe haben: Möglicherweise verstoßen Sie gegen die Hooks-Regeln

Wie rufe ich die Planung in der Hilfsfunktion auf? Ich denke, kundenspezifische Haken könnten der richtige Weg sein – ich werde es mir jetzt ansehen.

Beispiel für optimierte Komponenten:

...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>
      )
}

Vereinfachte Hilfsfunktionen:

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