Fungsi pembantu untuk menggunakan Redux Dispatch/React Hooks

Question

Saya mempunyai beberapa komponen yang dijadualkan berulang kali di dalamnya. Saya ingin menggunakan fungsi pembantu untuk mengimport dan menggunakan dalam berbilang komponen. Yang mengejutkan, ia tidak mudah-sekurang-kurangnya untuk saya. Baca banyak tentang perkara ini tetapi tidak dapat mengaitkannya.

Masalah yang saya hadapi ialah react-dom.development.js:16227 Ralat Tidak Ditangkap: Panggilan cangkuk tidak sah. Cangkuk hanya boleh dipanggil di dalam badan komponen berfungsi. Ini mungkin berlaku untuk salah satu daripada sebab berikut: Anda mungkin melanggar peraturan Hooks

Jadi bagaimana untuk memanggil penjadualan dalam fungsi pembantu? Saya fikir cangkuk tersuai mungkin cara untuk pergi - akan melihatnya sekarang.

Contoh komponen diperkemas:

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

Fungsi tambahan yang dipermudahkan:

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

Anda hanya boleh menggunakan cangkuk React dalam komponen berfungsi React, tetapi anda boleh menghantar fungsi kepada fungsi pembantu seperti ini:

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