J'ai plusieurs composants qui y sont programmés à plusieurs reprises. Je souhaite utiliser une fonction d'assistance pour importer et utiliser dans plusieurs composants. Ce qui est exaspérant, c’est que ce n’est pas facile, du moins pour moi. J'ai beaucoup lu à ce sujet, mais je ne peux pas m'y identifier.

Le problème que j'ai rencontré était react-dom.development.js:16227 Erreur non détectée : appel de hook non valide. Les hooks ne peuvent être appelés qu’à l’intérieur du corps d’un composant fonctionnel. Cela peut se produire pour l'une des raisons suivantes : Vous enfreignez peut-être les règles de Hooks

Alors comment appeler la planification dans la fonction d'assistance ? Je pense que les crochets personnalisés pourraient être la voie à suivre - j'y jetterai un œil maintenant.

Exemple de composants rationalisés :

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

Fonctions auxiliaires simplifiées :

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